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JavaScript 语 言 是 一 种 具有 高 度 表 达能 力 的 、 基 于 原型 特性 的 、 非 党 
灵活 的 面 同 对 象 程序 设计 语言 。 本 书 着 重 于 介绍 JavaScript 在 面 问 对 象 
方面 的 特性 ， 以 为 您 展示 如 何 去 构 建 强健 的 、 可 维护 的 、 功 能 强大 的 应 
用 程序 及 程序 库 。 

本 书 是 《JavaScript 面 同 对 象 编程 指 丙 》 的 第 2 版 ， 全 书包 括 8 革 和 4 
个 附录 。 依 次 介绍 了 JavaScript 的 发 展 历史 、 基 础 性 话题 (变量 、 数 据 类 
型 、 数 组 、 循 环 以 及 条 件 表 达 式 ) 、 了 函数、 对 象 、 原 型 、 继 承 的 实现 、 
BOM 和 DOM 等 。 附 录 部 分 包括 了 学 习 JavaScript 编 程 常用 的 参考 资源 。 
尤其 值得 一 提 的 是 ， 本 书 作 者 是 JavaScript 设计 模式 方面 的 专家 ， 他 在 
本 书 第 8 章 中 介绍 了 几 种 常用 的 JavaScript 编程 模式 ， 这 也 成 为 他 的 另 
一 本 重要 著作 《JavaScript 模 式 》 (JavaScript Patterns) 黄 定 了 基础 。 

本 书 全 面 地 窗 盖 了 JavaScript 语 言 的 O00 特性 ， 同 时 兼顾 基础 知识 ， 
对 初学 者 来 说 ， 是 难得 的 JavaScript 佳 作 。 读 者 不 需要 具备 任何 的 
JavaScript 基 础 知识 及 项 目 经 验 ， 通 过 学 习 这 本 书 ， 将 会 在 面试 有 关 
JavaScript 程 序 设计 的 职位 时 游 用 有 余 。 
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BREI- APE PN VE C2 SK, KERE S ETF. RA 
人 是 从 来 不 看 序 的 ， 技 术 类 的 国外 翻译 作品 就 更 不 看 译 者 序 了 。 我 相信 
你 们 也 不 会 看 的 ， 那 我 束 乱 写 了 。 

前 段 时 间 在 网 络 上 看 了 车 洪 才 老 先生 编写 《阿富汗 语词 典 》 的 故 
事 。36 年 ，200 万 字 ， 完 稿 时 已 斗 转 星 移 。 我 记得 我 阅读 的 时 候 在 往 西 
藏 南路 地 铁 站 走 ， 看 着 看 着 便 情 不 自己 ， 然 后 在 号 路 边 大 活 。 

我 觉得 翻译 书 是 一 件 非常 冬 寞 的 工作 。 它 需要 强大 的 精神 力 去 自 始 
而 终 地 执行 ， 这 种 精神 力 的 重要 性 甚至 要 高 于 对 专业 水 平 以 及 英语 水 平 
的 要 求 。 这 本 译作 的 诞生 是 对 我 意志 的 磨 练 ， 我 相信 我 今后 也 不 会 态 记 
这 近 百 个 日 夜 ， 我 是 如 何 阅读 、 翻 译 、 核 对 ， 再 阅读 、 翻 译 、 核 对 ， 反 
反复 复 ， 直 到 终结 的 这 一 天 ， 悦 知 隅 世 。 

然而 ， 书 的 修成 不 都 如 此 吗 ? 前 有 明 旨 的 《永乐 大 典 》， 近 有 车 潜 
才 老 先生 的 《阿富汗 语词 典 》。 我 还 看 过 一 部 电影 《 编 髓 记 》 ， 讲 述 的 
是 一 部 字典 历经 十 余年 的 修成 。 跟 他 们 相 比 ， 这 本 小 小 的 书 所 花费 的 心 
血 实 在 是 不 值 一 提 。 

对 于 读者 也 是 如 此 的 。 我 从 不 相信 21 天 可 以 学 会 任何 一 项 技术 。 在 
这 个 领域 成 为 一 个 专家 ， 并 没有 比 其 他 领域 困难 或 者 容易 更 多 。 如 同 这 
本 书 所 耗费 的 我 的 心力 一 样 ， 计 算 机 技术 将 在 此 生 折 磨 你 ， 成 就 你 《或 
许 它 已 经 这 么 做 了 ) 。 而 这 本 书 ， 不 过 是 这 漫漫 长 路 的 一 个 驿站 。 我 只 
不 过 先 于 你 到 此 ， 我 只 不 过 是 个 转述 者 ， 如 此 而 已 。 

我 不 相信 这 本 书 有 字典 一 样 漫 长 的 生命 。 十 年 、 甚 至 只 是 五 年 后 ， 



































计算 机 技术 的 日 新 月 异 可 能 会 让 本 书 一 文 不 值 ， 非 法 网 站 甚至 不 愿 提 供 
本 书 的 盗版 “当然 ， 你 应 该 明日 ， 盗 版 会 多 么 伤害 本 书 的 所 有 工作 
者 ) 。 然 而 我 们 对 此 坦然 以 待 。 如 同 所 有 序言 要 说 的 : 这 是 一 本 好 书 。 
作为 本 书 原版 最 认真 的 读者 之 一 ， 我 保证 : 如 果 你 是 这 本 书 的 目标 读 
者 ， 这 本 书 绝 不 会 白 日 浪费 你 所 付出 的 时 间 以 及 金钱 。 我 们 知道 这 本 书 
终 有 一 天 会 被 时 代 的 洪流 所 抛弃 ， 但 是 仍然 将 这 本 书 如 此 呈现 给 你 ， 因 
为 推动 这 时 代 疝 前 的 正 是 未 来 的 你 ， 我 们 乐于 见证 那 一 刻 的 到 来 一 一 十 
FA IES A OZ RIA ISSR, UZAY AS te FF 

首先 感谢 原版 的 两 位 作者 ， 没 有 你 们 当然 就 绝 不 会 有 这 本 书 。 感 谢 
姿 杰 的 努力 ， 让 我 有 机 会 参与 这 本 书 的 翻译 。 成 书 背 后 需要 很 多 人 的 工 
作 ， 感 谢 这 本 书 所 有 工作 人 员 的 付出 。 感 谢 母 杀 在 我 翻译 期 间 对 我 的 文 
持 ， 虽 然 她 并 不 确切 知道 我 在 做 什么 ， 但 时 值 我 失业 ， 我 决定 趁 此 机 会 
做 一 些 想 做 的 事 ， 她 对 此 没有 半分 怨言 。 特 别 感谢 上 海 市 黄浦 区 图 书馆 
七 楼 阅 贤 室 的 工作 人 员 ， 阅 览 室 民 好 的 秩序 全 是 你 们 的 功劳 ， 也 感谢 你 
们 没有 把 自 带 笔 记 本 的 我 赶 出 去 。 

本 书 编写 中 一 定 有 很 多 错漏 及 翻译 不 妥 之 处 。 我 看 到 了 你 们 对 于 第 
一 版 的 一 些 反 馈 ， 包 括 但 不 限于 豆 办 读书 、 亚 马 进 评论 等 ， 感 谢 你 们 的 
意见 和 建议 。 对 于 第 二 版 的 反馈 ， 我 在 此 留 下 一 个 github 地 址 ， 希 望 能 
够 与 大 家 交流 : http://github.com/scaret/00js。 

祝 你 阅读 愉快 。 
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Stoyan Stefanov: Facebook 公司 工程 师 、 作 家 、 演 说 家 。 他 经 各 会 
在 博客 Cwww.phpied.com) 上 与 一 些 相关 会 议 中 束 Web 开发 话题 发 表 
独到 见解 。 他 还 运营 着 其 他 一 些 网 站 ， 其 中 包括 JSPatterns.com 一 一 一 个 
专门 探讨 JavaScript 模 式 的 网 站 。Stoyan 曾 在 Yahoo! 公 司 任 职 ， 担 任 
YSlow 2.0 架构 师 职 务 ， 并 且 是 图 像 优 化 工具 Smush.it 的 作者 。 

谨 以 此 书 献 给 我 的 妻子 Eva， 及 我 的 女儿 Zlatina 和 Nathale。 感 谢 你 
们 的 耐心 、 文 持 与 鼓励 。 

也 将 此 书 献 给 我 的 编辑 们 。 你 们 自愿 将 时 间 投 入 本 书 草 稿 的 审读 
中 。 请 接受 我 由 衷 的 敬意 一 一 非常 感谢 你 们 无 价 的 投入 。 

Kumar Chetan Sharma 原本 一 直 致 力 于 成 为 一 个 电子 工程 师 ， 并 梦 
想 着 打造 一 个 终极 音 啊 系统 。 但 由 于 一 次 偶然 的 机 会 ， 他 得 到 了 一 份 与 
HTML 相 关 的 兼职 ， 然 后 自然 地 学 习 了 CSS 和 JavaScript， 从 此 便 一 发 不 
可 收拾 。 要 知道 在 那个 年 代 ，JavaScript 基 本 上 还 只 能 用 来 验证 表单 和 制 
作 一 些 奇特 的 DHTML 效 果 ， 且 IE6 还 在 世界 范围 内 独占 敖 头 。 但 就 从 那 
时 起 ， 他 就 已 经 在 开发 基于 LAMP 架 构 的 Web 应 用 了 。 从 白色 标签 的 社 
交 网 络 应 用 ， 到 为 电信 运营 疝 制 作 的 Web 控 制 面板 ， 再 到 联网 的 电子 充 
电 设 备 ， 都 有 他 开发 的 身影 。 目 前 他 在 Yahoo! 公 司 的 搜索 部 门 从 事前 端 
工程 师 的 工作 。 











Alex R. Young: 工程 学 硕士 ， 拥 有 超过 10 年 的 Web 与 移动 行业 经 
验 。 

他 还 是 DailyJS 网 站 的 首席 专栏 作家 ， 定 期 以 JavaScript 为 主题 撰写 
文章 。 他 曾 在 多 家 知名 跨国 公司 工作 ， 其 中 包括 Thomson Reuters。 目 前 
他 在 写 一 本 Node 方面 的 书 。 


本 书 是 《JavaScript 面 向 对 象 编程 指 南 》 的 第 二 版 。 前 一 版 由 Stoyan 
Stefanov 闭 〈(Packet 出 版 社 发 行 )， 在 业界 广 受 好 评 。 然 而 ， 目 第 一 版 
发 行 至 今 已 过 了 五 个 年 头 。 期 间 ，JavaScript 由 一 项 主要 适用 于 浏览 器 客 
户 端的 计算 机 技术 ， 逐 渐 发 展 成 为 一 种 多 功能 的 程序 设计 语言 ， 甚 至 连 
服务 端 也 能 由 它 来 编写 。 所 以 在 这 一 版 中 ， 我 们 继续 带领 大 家 学 习 
JavaScript 的 “语言 部 分 ”， 即 其 重心 依然 会 放 在 JavaScript HAAR Ah 
立 于 运行 环境 部 分 ) ， 着 重 讨论 ECMAScript、JavaScript 面 问 对 象 编 
程 、 模 式 ， 原 型 继承 以 及 设计 模式 。 

本 书 不 会 对 读者 的 JavaScript 基 础 知识 及 项 目 经 验 做 任何 假设 。 您 完 
全 可 以 从 零 开 始 ， 从 本 书 学 习 这 门 语言 。 同 时 ， 对 JavaScript 有 一 定 基 
础 的 读者 也 可 以 从 中 学 到 更 多 有 用 的 知识 。 另 外 ， 我 们 在 每 一 章 的 末尾 
都 设 有 习题 ， 以 便 帮 助 读 者 了 解 自 己 的 学 习 进 度 。 

本 书 所 涵盖 的 内 容 

mele: 面 问 对 象 的 JavaScript 简单 阐述 了 JavaScript 这 门 语言 的 历 
史 、 现 状 及 未 来 。 另 外 ， 我 们 还 对 面 癌 对 象 程 序 设计 中 的 基础 概念 做 了 
一 些 介 绍 ， 并 详细 说 明了 该 语言 调试 环境 (Firebug) 的 安装 、 设 置 及 应 
用 示范 。 

四 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 讨 论语 言 中 的 一 
些 基 础 性 话题 ， 包 括 变量 、 数 据 类 型 、 数 组 、 循 环 以 及 条 件 表达 式 。 

四 第 3 章 : AON JavaScript 中 函数 的 使 用 方法 。 在 这 一 章 
中 ， 我 们 将 系统 地 学 习 关 于 函数 的 一 切 内 容 。 男 外 ， 我 们 还 会 了 解 变量 
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趣 ， 但 也 很 不 容易 理解 ， 在 该 章 末 尾 ， 我 们 会 重点 介绍 。 

国 第 4 章 : 对 象 介绍 的 是 JavaScript 中 的 对 象 类 型 。 在 这 一 章 中 ， 我 
们 将 学 习 如 何 使 用 对 象 的 属性 与 方法 ， 以 及 创建 对 象 的 各 种 方式 。 男 
外 ， 我 们 还 会 讨论 JavaScript 中 的 内 建 对 象 ， 例 如 Array、Function、 
Boolean、Number、String 等 。 

mom: 原型 介绍 JavaScript 中 有 关 原 型 的 所 有 重要 概念 。 包 括 原 
型 链 的 工作 方式 、hasOwnProperty0 方 法 ， 以 及 JavaScript 中 的 原型 陷阱 


FY 
等 。 





BGE: 继承 讨论 如 何在 JavaScript 中 实现 继承 。 该 章 会 探讨 在 
JavaScript 中 创建 子 类 的 一 种 方式 ， 就 像 那些 基于 类 的 面向 对 象 编程 语言 
一 样 。 

m7: 浏览 器 环境 介绍 浏览 器 相关 的 内 容 。 在 这 一 章 中 ， 我 们 将 
会 了 解 到 有 关 BOM (Browser Object Model， 浏览 器 对 象 模 型 ) 和 
DOM (W3C 的 Document Object Model， 文 档 对 象 模型 ) 的 知识 ， 并 进 
一 步 了 解 与 浏览 器 事 件 和 AJAX 相关 的 内 容 。 

mB: 编程 模式 与 设计 模式 归纳 性 地 介绍 几 种 专用 于 JavaScript 
的 编程 模式 ， 以 及 洛 干 个 与 语言 无 关 但 适用 于 JavaScript 的 设计 模式 。 这 
些 模式 大 部 分 来 自 《 设 计 模 式 》 (GoF) 这 本 书 。 另 外 ， 该 章 也 会 对 
JSON 有 所 讨论 。 

mi SKA: 保留 字 列 出 了 JavaScript 中 的 保留 字 。 

BKB: 内 建 浮 数 是 一 份 JavaScript 中 内 建 函 数 的 参考 指南 ， 并 附 
有 人 简单 的 使 用 范例 。 

四 附录 C: 内 建 对 象 是 一 份 JavaScript 中 内 建 对 象 类 型 的 参考 指南 ， 
它 提供 了 详细 的 对 象 方法 、 属 性 介绍 和 使 用 示例 。 

BIN SD: 正则 表达 式 是 一 份 正则 表达 式 模式 的 参考 指南 。 

您 可 以 从 下 面 这 个 链接 获取 参考 答案 的 电子 版 : 


























http://www.packtpub.com/sites/default/files/downloads/31270T_Answers_to_ 

前 期 准备 

在 阅读 本 书 之 前 ， 您 需要 安装 一 个 现代 浏览 吉 一 一 推荐 Google 
Chrome 或 者 Firefox， 并 可 目 由 选择 是 否 安 装 Node.js。 虽 然 最 新 版 本 的 
Firefox 自 带 了 Web 开 发 者 工具 ， 但 我 们 还 是 非常 推荐 您 使 用 Firebug 岳 
件 。 当 然 ， 您 可 以 上 自行 选择 用 于 编写 JavaScript 代 码 的 文本 编辑 器 。 

适用 对 象 

本 书 适用 于 任何 希望 学 习 JavaScript 的 编程 初学 者 ， 包 括 那些 懂 一 点 
JavaScript， 却 对 其 面向 对 象 特 性 不 甚 了 解 的 读者 。 

一 些 约定 

在 这 本 书 中 ， 读 者 会 及 现 几 种 不 同样 式 的 文本 ， 它 们 各 目 代 表 了 不 
同类 型 的 信息 。 下 面 ， 我 们 将 通过 一 些 文本 实例 来 解释 一 下 这 些 样式 各 
和 目 所 代表 的 含义 。 

对 于 一 段 文本 中 的 代码 ， 我 们 将 以 如 下 形式 来 表现 :“ 你 可 以 通过 
检查 事件 对 象 的 cancellable 属 性 来 确认 ”。 

而 对 于 代码 块 文本 ， 我 们 将 采用 如 下 格式 : 


Var d; 




















var thisIsA Variable; 

var _and_this too; 

var mix12three; 

当 需 要 提醒 你 注意 代码 的 输出 时 ， 我 们 会 将 相关 行 或 项 目的 字体 加 
粗 ， 例 如 : 

> var case_matters = 'lower'; 

> var CASE_MATTERS = ‘upper’; 

> case_matters; 

"lower" 

> CASE_MATTERS; 


"upper" 

命令 行 输入 及 输出 会 仿照 如 下 格式 呈现 : 

aliasjsc='/System/Library/Frameworks/JavaScriptCore.framework/" 
rrent/Resources/jsc' 

男 外 ， 加 粗 字 体 还 经 常用 于 强调 新 的 术语 或 重要 词汇 。 例 如 ， 我 们 
屏 医 上 的 荣 单 以 及 对 话 框 中 会 看 到 的 单词 ， 通 名 会 这 样 表述 :“ 在 单 击 
Cancel 按钮 后 ，preventDefault(0) 方 法 就 会 被 调用 ”。 

这 种 形式 表达 的 是 一 些 需要 读者 警惕 或 需要 重点 关注 | 


iow 
Ks 的 内 容 。 


is) 这 种 形式 所 提供 的 是 一 些 提示 或 小 技巧 ， ] 
读者 反馈 





我 们 始终 欢迎 任何 来 自 读 者 的 反馈 信息 。 请 务必 让 我 们 了 解 您 对 于 
这 本 书 的 看 法 一 一 您 喜欢 本 书 的 哪 部 分 ， 或 者 不 喜欢 本 书 的 哪 部 分 。 这 
些 反 馈 对 于 我 们 的 选 题 开发 来 说 都 是 至 关 重 要 的 。 

对 于 一 般 的 反馈 ， 您 只 需 简单 地 给 feedback@packtpub.com 发 一 份 
电子 邮件 ， 并 在 邮件 的 标题 中 注 明 这 本 书 的 书 名 即 可 。 

如 果 您 对 某 一 话题 有 专长 ， 并 且 有 兴趣 撰写 一 本 这 方面 的 书 (或 为 
某 本 书 作出 贡献) ， 请 参考 我 们 的 作者 指南 : 
http://www.packtpub.com/authors o 

客户 文 持 

{RARER MARA Packt 图 书 的 主人 ， 我 们 将 会 尽 一 切 努 力 来 帮助 
您 获取 最 好 的 图 书 资 讯 。 

勘误 表 

尽管 我 们 已 经 斥 了 最 大 努力 来 确保 书 中 内 容 的 正确 性 ， 但 错误 始终 














可 能 存在 。 如 果 您 在 我 们 的 书 中 发 现 了 错误 一 一 无 论 是 关于 文字 的 还 是 
代码 的 只 要 您 能 告诉 我 们 ， 我 们 都 将 不 胜 感激 。 这 样 也 可 以 大 大 减 
少 其 他 读者 在 阅读 方面 所 过 到 的 困难 。 当 您 发 现 错误 时 ， 只 需要 访问 
http:/www.packtpub.com/submit-errata， 选 择 相 应 的 书 名 ， 然 后 单 

击 “errata submission form2” 链 接 并 输入 相关 错误 的 详细 信息 即 可 。 一 旦 您 
提供 的 信息 获得 了 确认 ， 相 关 的 内 容 就 会 出 现在 这 本 书 的 勘误 表 中 。 我 
们 出 版 社 所 有 现存 的 勘误 表 都 可 以 在 http:/www.packtpub.com/support 中 
获取 。 

版 权 

在 互联 网 上 ， 版 权 对 于 所 有 媒介 一 直 是 一 个 很 大 的 问题 。 在 
Packet， 我 们 同 来 对 于 版 权 许 可 非常 重视 。 如 果 您 在 网 络 上 发 现 我 们 出 
版 过 的 作品 ， 无 论 它 是 出 于 什么 形式 ， 都 请 马上 将 网 址 或 网 站 名 称 告知 
我 们 ， 以 便于 我 们 采取 补救 措施 。 

请 将 您 怀疑 有 侵权 行为 的 文档 链接 发 送 到 : 
copyright@packetpub.com。 您 付出 的 帮助 是 对 作者 权利 的 保护 ， 我 们 也 
由 此 才能 继续 为 您 带 来 有 价值 的 内 容 。 

疑问 

如 果 您 对 本 书 有 任何 疑问 ， 也 可 以 通过 questions@packtpub.com 跟 
我 们 联系 ， 我 们 将 竭尽 所 能 地 蔡 您 解决 。 





























H Web 诞生 以 来 ， 人们 对 于 动态 与 啊 应 式 页 面 的 需求 便 与 日 俱 
增 。 虽 然 静态 的 HTML 文 本 页 面 在 可 读 性 方面 或 许 会 更 好 一 些 ， 特 别 是 
在 有 了 CSS 的 辅助 之 后 ， 页 面 排 版 显得 更 加 美观 了 ， 但 从 另 一 方面 来 
说 ， 如 果 我 们 能 让 人 们 像 在 桌面 上 那样 使 用 浏览 器 中 的 应 用 程序 ， 事 情 
或 许 会 变 得 更 有 趣 一 些 。 如 今 ， 我 们 已 能 在 浏览 器 中 直接 使 用 电子 邮 
件 、 上 日历、 电子 银行 、 购 物 、 绘 画 、 游 戏 及 文本 编辑 。 这 都 要 感谢 一 种 
Web 编 程 语 言 JavaScript， 是 它 让 这 些 Web 应 用 成 为 了 可 能 。 然 而 ， 
JavaScript 最 初 也 只 不 过 是 我 们 偶尔 舱 入 在 HTML 中 的 一 小 行 代码 ， 但 如 
今 它 已 经 日 趋 成 熟 ， 并 且 被 广泛 使 用 。 开 发 者 们 利用 该 编程 语言 的 面向 
对 象 特 性 ， 实 现 了 代码 重用 ， 并 构建 起 了 可 伸缩 的 代码 架构 。 

如 果 我 们 回顾 一 下 Web 开 发 领域 这 些 年 来 的 流行 词汇 
DHTML, Ajax, Web 2.0、HTML5， 就 会 发 现 这 些 词 背后 的 内 涵 始 终 
没有 变 ， 依 然 是 : HTML、CSS、JavaScript。 其 中 HTML 服 务 于 内 容 ， 
CSS 服 务 于 表现 ， 而 JavaScript 则 服务 于 行为 。 换 句 话说 ，JavaScript 是 让 
一 切 东 西 协同 运作 的 粘 合剂 ， 有 了 和 它 ， 我 们 才能 在 构建 出 丰富 多 彩 的 
Web 应 用 程序 。 

但 事情 远 不 止 如 此 ，JavaScript 的 应 用 领域 并 不 仅仅 局 限于 Web 平 
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在 JavaScript 程序 所 能 运行 的 多 种 宿主 环境 中 ，Web 浏览 器 无 疑 是 
用 得 最 普遍 的 那 一 种 ， 但 JavaScript 也 可 以 运行 于 其 他 环境 。JavaScript 
可 以 应 用 于 各 式 各 样 的 小 工具 、 应 用 扩展 、 以 及 其 他 软件 ， 本 书 在 后 续 








章节 中 会 一 一 提 及 。 总 而 言 之 ， 将 时 间 投 资 于 学 习 JavaScript 是 一 个 明 
智 的 选择 ， 因 为 一 旦 您 掌握 了 JavaScript， 就 可 以 编写 出 各 种 适用 于 多 
种 平台 的 不 同 应 用 ， 包 括 手 机 应 用 和 服务 器 端 程序 。 毕 竟 ， 如 今 我 们 要 
说 JavaScript 无 所 不 在 ， 那 确实 是 一 点 都 不 夸张 。 

本 书 将 从 零 开 始 ， 我 们 不 会 对 读者 的 编程 背景 做 任何 假设 ， 只 需要 
您 了 解 一 点 HTML 常 识 即 可 。 而 且 除 了 有 一 个 章 季 用 于 探讨 Web 浏 览 器 
环境 以 外 ， 本 书 其 他 部 分 都 在 纯粹 地 关注 JavaScript 语 言 本 身 。 因 此 ， 您 
可 以 将 在 本 书 中 学 到 的 知识 应 用 于 所 有 的 JavaScript 环 境 。 

下 面 ， 我 们 将 从 以 下 两 点 开始 : 

对 JavaScript 背 后 故事 的 简单 介绍 ; 

面向 对 象 。 














1.1 回顾 历史 


起 初 ，Web 页 面 不 过 是 一 些 以 静态 HTML 文 档 形式 发 布 的 科学 出 版 
物 ， 这 些 文 档 之 间 只 依靠 一 些 简 单 的 超 链 接 (hyperlinks) 绑 定 在 一 
起 。 这 可 能 有 些 难以 置信 ， 但 最 早 的 Web 页 面 的 确 是 不 文 持 任何 图 片 
的 ， 但 这 种 情况 不 久 便 得 到 了 改善 。 随 后 Web 就 越 来 越 广 受 欢迎 ， 规 模 
也 在 不 断 增 大 ， 很 快 随 着 Web 业 务 的 快速 普及 和 增长 ， 网 站 管理 者 越 来 
越 希 望 自己 所 创建 的 Web 页 面 能 处 理 更 多 的 事情 。 例 如 ， 他 们 希望 网 站 
能 具有 更 丰富 的 用 户 交 互 能 力 ， 主 要 是 能 完成 一 些 简 单 任务 (如 验证 表 
单 之 类 ) ， 以 此 节省 与 服务 器 端的 信息 交互 。 当 时 他 们 可 以 有 两 种 选 
择 : Java applets 和 LiveScript。 其 中 ，LiveScript 是 1995 年 由 Netscape 公 
司 的 Brendan Eich 所 开发 的 程序 设计 语言 。Netscape 2.0 发 布 之 后 ， 它 
被 正式 更 名 为 JavaScript。 

众所周知 ，Applets 后 来 没落 了 ，JavaScript 则 更 加 繁荣 。 这 种 通过 
在 HIML 中 明 入 简短 代码 段 来 调整 Web 页 面 中 其 他 静态 元 素 的 方式 在 网 
站 管理 者 间 大 受 好 评 。 但 没 过 多 久 ， 浏 览 器 的 范 争 厂商 Microsoft 公司 就 
发 布 了 支持 JScript 的 Internet Explorer (IE) 3.0。JScript 简 直 就 是 
JavaScript 的 翻版 ， 并 且 还 在 其 继承 之 上 引入 了 一 些 IE 独 有 的 特性 。 最 
终 ， 为 了 使 语言 的 实现 更 趋向 于 标准 化 ， 于 是 ECMAScript 应运 而 生 
Jo ECMA 【欧洲 计算 机 制造 商 协 会 ) 创建 了 ECMA-262 标 准 ， 该 标准 
脱离 了 浏览 器 和 那些 Web 独 有 的 特性 ， 集 中 摘 述 了 JavaScript 作 为 编程 语 
言 的 核心 部 分 。 

大 至 上 ，JavaScript 这 个 术语 通常 涵盖 了 以 下 3 个 部 分 。 

ECMAScript 一 一 语言 的 核心 部 分 〈 即 变量 ， 函 数 ， 循 环 等 等 ) : 
这 个 部 分 独立 于 浏览 器 之 外 ， 并 可 以 在 其 他 环境 中 使 用 。 

















文档 对 象 模型 (DOM) : 它 实际 上 是 提供 了 一 种 与 HTML, XML 
文档 交互 的 方式 。 最 初 ，JavaScript 只 能 提供 对 页 面 上 一 部 分 元 素 的 有 
限 访问 能 力 ， 主 要 集中 在 表单 ， 超 链接 和 图 片 这 些 元 素 上 。 后 来 权限 逐 
渐 被 扩大 ， 如 今 几 乎 所 有 元 素 都 已 经 可 以 访问 了 。 为 此 ， 万 维 网 联盟 
CW3C) 还 专门 创建 了 DOM 标 准 。 该 标准 是 一 种 独立 的 〈 即 它 并 不 依 
iT JavaScript) 操作 结构 化 文档 的 方式 。 

浏览 器 对 象 模 型 (BOM) : 这 实际 上 是 一 个 与 浏览 费 环 境 有 天 的 
对 象 集合 。 原 本 没有 任何 标准 可 言 ， 直 到 HIML5 诞 生 之 后 ， 人 们 才 定 
义 了 一 些 浏 览 器 之 间 通 用 的 对 象 标准 。 

虽然 本 书 专门 有 一 个 章节 用 于 阐述 浏览 器 、 DOM 及 BOM， 但 大 部 
分 内 容 还 都 在 讲述 JavaScript 语言 的 核心 部 分 ， 您 在 这 里 所 学 到 的 
JavaScript 知识 基本 都 可 应 用 于 任何 JavaScript 执 行 环境 。 




















1.2 浏览 器 的 战 兴 


— 





无 论 结果 是 好 是 坏 ，JavaScript 都 在 随后 爆发 的 第 一 次 浏览 器 大 战 
(大 约 是 在 1996 年 到 2001 年 间 ) 中 得 到 了 迅速 的 普及 。 a 
网 发 展 处 于 第 一 波 热 淹 ， 其 中 主要 由 Netscape 和 Microsoft 这 两 大 浏览 
三 隘 在 争夺 市 场 份额 。 在 此 过 程 中 ， 他 们 不 断 地 把 各 种 浮华 的 特性 添加 
到 各 自 的 浏览 器 与 JavaScript、DOM 及 BOM 中 ， 从 而 导致 了 许多 不 一 r 
性 。 与 此 同时 ， 由 于 浏览 器 厂商 都 在 忙于 继续 增加 新 的 浏览 器 特性 ， 
至 于 根本 没 能 及 时 更 新 相应 的 工具 ， 这 造成 了 开发 工具 的 严重 滞后 。 
种 情况 给 使 用 JavaScript 的 开发 人 员 带 来 巨大 的 痛苦 。 TT 
REAS 5 YU AE BN ASE 95 ea EMA AREMA 8 TE 
工作 ， 而 且 还 没有 合适 的 错误 信息 ， 只 得 到 如 “操作 终止 en 
错误 先知 。 

实现 上 的 不 一 致 ， mite 甚至 连 能 将 JavaScript 关键 字 高 
显示 的 编辑 器 都 没有 。 这 一 切 都 令 开发 者 们 再 也 没 法 忍受 了 。 

En~ i, n 己 也 在 他 们 的 Web 页 面 中 使 用 了 太 多 的 新 特 
性 ， 总 迫不及待 地 想 引 入 浏览 器 提供 的 每 一 项 新 功能 ， 以 “加 强 ” 自 己 的 
页 面 。 例 如 状态 栏 中 的 动画 、 闪 烁 的 颜色 、 ARIS. 会 摇晃 的 浏览 
器 窗口 、 屏 幕 上 的 雪花 效果 、 能 跟踪 对 象 的 鼠标 光标 等 ， 这 不 但 牺牲 了 
ia 而 且 也 伤害 了 用 户 体验 。 这 些小 用 现象 如 今 大 多 都 消失 了 ， 但 

这 在 当时 极 大 地 损坏 了 JavaScript 在 业界 的 名 声 。 许 多 “专业 的 ”程序 员 将 

JavaScript 岂 低 为 设计 师 的 玩具 ， 并 批评 它 不 适合 用 来 开发 专业 应 用 。 
JavaScript 语言 在 一 些 Web 项目 中 遭 到 了 强烈 抵制 。 某 些 项 目 甚至 完全 
拒绝 对 浏览 器 端 进行 任何 的 程序 设计 ， 转 而 只 信任 他 们 自己 可 以 掌控 的 
服务 器 端 。 确 实 ， 在 当时 那 种 情况 下 ， 也 没有 什么 理由 值得 我 们 花费 双 














倍 的 时 间 来 为 这 些 不 同 的 浏览 器 设计 项 目 ， 然 后 再 花 更 多 的 时 间 去 调试 
eA 

这 种 情况 一 直 持 续 到 第 一 次 浏览 器 大 战 结束 。 但 在 随后 的 几 年 中 ， 
Web 开 发 领域 在 一 系列 历史 进程 的 推动 下 ， 终 于 发 生 了 一 些 非常 积极 的 
M 

Microsoft 公司 依靠 新 发 布 的 IE6 赢得 了 战争 。 在 那 时 ，IE6 虽然 的 
确 是 最 棒 的 浏览 器 ， 但 其 后 数 年 ， 他 们 却 停 止 了 对 下 的 开发 ， 这 给 了 其 
他 浏览 器 充分 的 时 间 ， 使 它们 能 够 在 功能 上 逐步 完成 对 正 的 奶 赶 和 超 
越 。 

Web 标准 化 运动 渐渐 被 开发 人 员 和 浏览 器 厂商 所 接受 。 这 是 很 自然 
的 ， 毕 竟 对 于 开发 人 员 来 说 ， 谁 也 不 想 因为 不 同 的 浏览 器 而 花费 双 倍 
(甚至 更 多 ) 的 开发 时 间 ， 这 促使 各 方 都 越 来 越 倾 加 于 遵守 统一 的 开发 
标准 。 

开发 人 员 和 技术 本 身 也 日 趋 成 熟 了 ， 越 来 越 多 的 人 开始 将 注意 力 转 
移 到 其 他 方面 ， 例 如 可 用 性 、 渐 进 增强 技术 及 可 访问 性 。 开 发 辅助 工具 
(fil Firebug) 也 让 开发 变 得 更 高 效 ， 减 轻 了 开发 者 的 负担 。 

在 这 种 健康 环境 的 影响 下 ， 开 发 人 员 开始 谋求 一 种 更 好 的 新 型 开发 
模式 ， 以 取代 这 些 现 有 的 开发 方式 。 随 者 Gmail 和 Google Maps 这 一 类 军 
客户 端 应 用 的 相继 出 现 ， 很 显然 ， 如 今 的 JavaScript 已 经 成 为 一 种 成 熟 
的 、 某 些 方面 独一无二 的 、 拥 有 强大 原型 体系 的 面向 对 象 语 言 。 关 于 这 
点 ， 最 好 的 例子 英 过 于 是 对 XMLHttpRequest 对 象 的 重新 发 现 和 推广 ， 
该 对 象 起 初 不 过 是 一 个 正 -only 特 性 ， 但 如 今 已 经 得 到 绝 大 多 数 浏 览 器 的 
支持 。 通 过 XMLHttpRequest 对 象 ，JavaScript 就 能 以 HTTP 请 求 的 形式 
从 服务 器 上 获取 所 需 的 新 鲜 内 容 ， 从 而 实现 了 页 面 的 局 部 更 新 。 这 样 一 
来 ， 我 们 就 不 必 每 次 都 刷新 整个 页 面 。 随 着 XMLHttpRequest 对 象 的 广 
泛 应 用 ， 一 种 类 桌面 式 的 Web 应 用 模式 诞生 了 ， 我 们 称 之 为 AJAX 应 
用 。 











1.3 分 析 现 状 





有 意思 的 是 ，JavaScript 必须 运行 于 某 种 宿主 环境 中 。Web 浏览 中 
仅仅 是 其 中 一 种 ， JavaScript 也 完全 可 以 运行 在 服务 器 端 、 桌 面 以 及 移 
动 设备 中 。 如 今 ， 我 们 已 经 可 以 用 JavaScript 来 实现 以 下 功能 

创建 拥有 强大 而 丰富 功能 的 Web 应 用 程序 〈 这 种 应 用 程序 往往 运 
行 在 Web 浏览 器 中 ) 。 另 外 还 有 基于 HTML5 的 许多 特性 ， 例 如 应 用 组 
存 、 本 地 存储 、 本 地 数据 库 。 无 论 是 线 上 应 用 还 是 离线 应 用 ，Web 应 用 
都 可 以 做 得 非常 强大 。 

使 用 .NET 和 Node.js 编写 服务 器 端 脚本 ， 或 者 使 用 Rhino 〈 这 是 一 
种 用 Java 实现 的 JavaScript 引 擎 ) 这 样 的 框架 来 进行 编程 。 

为 移动 设备 编写 各 种 应 用 程序 。 借 助 于 PhoneGap 及 Titanium 这 样 
的 工具 ， 我 们 完全 可 以 使 用 纯 JavaScript 来 编写 iPhone、Android 或 其 他 
平台 上 应 用 程序 。 另 外 值得 一 提 的 是 ， 移 动 平 台 Firefox OS 的 原生 编程 
语言 就 是 JavaScript. HTML 和 CSS 。 

使 用 ActionScript 创建 定 媒 体 应 用 (如 Flash, Flex) 。ActionScript 
也 是 一 种 基于 ECMAScript 标 准 的 脚本 语言 。 

编写 各 种 基于 命令 行 的 、 用 于 果 面 自动 化 管理 的 脚本 任务 。 其 自从 
的 宿主 环境 如 Windows Scripting Host 及 Mac 下 的 WebKit JavaScript 
Core。 

poe) ee deen 例如 Dreamweaver、 
Photoshop 及 大 多 数 浏览 

使 用 Mozilla E TTA Air 创 建 跨 操 作 系 统 的 曲面 应 用 程 
Fa 

使 用 Yahoo! Widgets% Mac Dashboard Widgets 等 工具 包 来 创建 桌面 








小 工具 。 其 中 ， Yahoo! Widgets 还 可 以 在 智能 电视 上 运行 。 

当然 ， 这 里 列 出 的 远 远 不 是 该 语言 的 全 部 应 用 。JavaScript 应 用 的 确 
发 问 于 Web 页 面 ， 但 如 今 几 乎 可 以 说 是 无 所 不 在 了 。 男 外 ， 浏 览 器 厂商 
如 今 都 将 运行 速度 视 为 产品 的 苋 争 优势 之 一 ， 因 此 都 致力 于 创建 更 快 的 
JavaScript 引擎 。 这 对 于 用 户 与 开发 者 来 说 无 颖 是 个 好 消息 ， 并 且 这 将 
打开 一 局 大 门 一 一 在 新 的 领域 ， 例 如 在 图 像 、 首 频 及 视频 处 理 、 游 戏 开 
发 等 方面 ，JavaScript 也 必 将 一 展 拳脚 。 

















1.4 展望 


对 于 未 来 的 情况 ， 我 们 这 里 只 能 做 一 些 猜测 。 但 几乎 可 以 肯定 地 
说 ，JavaScript 语 言 必 将 会 有 它 的 一 席 之 地 。 毕 竟 ， 在 过 去 相当 长 的 一 段 
时 间 里 ，JavaScript 在 被 严重 低估 、 始 终 未 得 到 充分 利用 (或 者 被 错误 地 
滥用 了 ) 的 情况 下 ， 依 然 几乎 每 天 都 能 有 很 多 新 的 、 有 趣 的 JavaScript 心 
用 被 开发 出 来 。 一 切 都 是 从 那 行 简单 的 、 内 骨 于 HTML 标 签 中 例如 
onclick 事 件 ) 的 代码 开始 的 。 如 今 的 开发 人 员 所 面 对 的 商业 开发 往往 要 
复杂 得 多 ， 这 需要 民 好 的 设计 和 规划 ， 以 及 合适 的 应 用 扩展 和 程序 库 。 
JavaScript 必 将 在 其 中 得 到 真正 的 用 武之 地 ， 开 发 人 员 无 疑 会 更 加 重视 它 
独 有 的 面向 对 象 特性 ， 以 获取 越 来 越 多 的 便利 。 

曾经 被 列 为 职位 要 求 中 的 “加 分 项 ”的 ”JavaScript， 如 今 已 经 成 为 了 
招聘 Web 开发 人 员 的 决定 性 因素 。 例 如 ， 我 们 在 面试 时 常会 被 问 到 这 
样 的 问题 : “JavaScript 是 一 种 面 回 对 象 语言 吗 ? 如 果 是 ，JavaScript 中 的 
继承 关系 是 如 何 实现 的 呢 ? ”在 读 过 这 本 书 之 后 ， 您 就 会 对 这 类 面试 有 
充分 的 准备 ， 甚 至 还 能 凭借 一 些 连 面 试 官 自己 都 不 知道 的 知识 来 打动 他 
{Je 





1.5 ECMAScript 5 


几乎 所 有 的 现代 浏览 器 与 其 他 相关 环境 都 实现 了 ECMAScript 的 第 3 
版 ， 对 此 我 们 可 以 安心 使 用 。 第 4 版 则 直接 被 跳 过 了 。 而 ECMAScript 的 
第 5 版 〈 以 下 简称 为 ES5) 则 到 2009 年 12 月 才 被 正式 采纳 。 

ESS 中 除了 引入 了 一 些 新 的 对 象 与 属性 外 ， 它 还 提供 了 “严格 模式 
(strict mode) ”。 所 谓 严格 模式 其 实 就 是 在 ES5 发 布 之 前 ， 市 面 上 各 版 
互 不 兼容 语言 的 子 集 。 严 格 模式 是 可 选 的 ， 也 就 是 说 ， 选 择 以 严格 模式 
执行 的 代码 段 〈 以 函数 为 单位 ， 或 者 整个 程序 ) 都 必须 要 在 其 头 部 作 如 
下 声明 : 

"use strict"; 

这 其 实 是 一 个 JavaScript 字符 串 。 虽 然 我 们 并 没有 将 其 赋值 给 某 个 
变量 ， 执 行 后 也 不 会 有 什么 效果 ， 但 它 符合 JavaScript 语 法 。 因 此 不 文 持 
ES5 严 格 模式 的 老式 浏览 器 会 直接 忽略 它 ， 然 后 以 普通 的 JavaScript 对 
待 其 后 的 代码 。 也 就 是 说 ， 这 种 严格 模式 是 问 后 兼容 的 ， 使 用 严格 模式 
不 会 导致 老式 浏览 器 无 法 执行 代码 。 

或 许 在 将 来 的 版 本 中 ， 严 格 模式 由 可 能 会 成 为 ES 的 默认 模式 ， 甚 
至 是 唯一 模式 。 但 现在 它 还 只 是 一 个 可 选项 。 

出 于 问 后 兼容 的 考虑 ， 本 书 所 有 的 示例 都 将 遵守 ES3 规 则 ， 但 同时 
本 书 中 所 有 的 代码 也 都 能 在 ES5 严 格 模式 下 正常 执行 ， 不 会 有 任何 警 
告 。 另 外 ， 本 书 中 专门 为 ES5 所 写 的 部 分 会 被 清楚 地 标记 出 来 。 而 关于 
ES5 的 新 特性 ， 我 们 在 附录 C， 内 建 对 象 中 会 有 详细 收录 。 




















在 深入 学 习 JavaScript 之 前 ， 我 们 首先 要 了 解 一 下 “面向 对 象 * 的 具 
体 含 义 ， 以 及 这 种 程序 设计 风格 的 主要 特征 。 下 面 我 们 列 出 了 一 系列 在 
面向 对 象 程 序 设计 COOP) 中 最 常用 到 的 概念 : 

对 象 、 方 法 、 属 性 ; 
F; 
封装 ; 


Xx AL 
聚合 ; 


重用 与 继承 ; 

BR 

现在 ， 我 们 就 来 详细 了 解 每 个 概念 。 当 然 ， 如 果 您 在 面向 对 象 程序 
设计 方面 是 一 个 新 手 ， 或 者 不 能 确定 自己 是 否 真 的 理解 了 这 些 概念 ， 那 
也 不 必 太 过 担心 。 以 后 我 们 还 会 通过 一 些 代 码 来 为 您 具体 分 析 它 们 。 尽 
管 这 些 概念 说 起 来 好 像 很 复杂 、 很 高 级 ， 但 一 旦 我 们 进入 真正 的 实践 ， 
事情 往往 就 会 简单 得 多 。 





1.6.1 对 象 





既然 这 种 程序 设计 风格 叫做 面向 对 象 ， 那 么 其 重点 就 应 该 在 对 象 
上 。 而 所 谓 对 象 ， 实 质 上 就 是 指 “ 事 物 ”( 包 括 人 和 物 ) 在 程序 设计 语言 
中 的 表现 形式 。 这 里 的 “事物 ”可 以 是 任何 东西 〈 如 某 个 客观 存在 的 对 
象 ， 或 者 某 些 较为 抽象 的 概念 ) 。 例 如 ， 对 于 猫 这 种 常见 对 象 来 说 ， 我 
们 可 以 看 到 它们 具有 某 些 明确 的 特征 〈 如 颜色 、 名 字 、 体 型 等 ) ， 能 执 
行 某 些 动作 〈 如 咬 噶 叫 、 睡 觉 、 握 起 来 、 逃 跑 等 ) 。 在 OOP 语 义 中 ， 这 








些 对 象 特 征 都 叫做 属性 ， 而 那些 动作 则 被 称 为 方法 。 

此 外 ， 我 们 还 有 一 个 口语 方面 的 类 比 山 。 

对 象 往往 是 用 名 词 来 表示 的 〈 如 book、person) 。 

方法 一 般 都 是 些 动词 〈 如 read、run) 。 

属性 值 则 往往 是 一 些 形 容 词 。 

我 们 可 以 斌 一下。 例如， 在 “The black cat sleeps on my head” 这 个 句 
FH, “the cat”( 名 词 ) 就 是 一 个 对 象 ，“black”( 形 容 词 ， 则 是 一 个 闫 
色 属 性 值 ， 而 “sleep”( 动 词 ， 则 代表 一 个 动作 ， 也 就 是 OOP 语 义 中 的 方 
法 。 甚 人 至， 为 了 进一步 证 明 这 种 类 比 的 合理 性 ， 我 们 也 可 以 将 句子 中 
的 “on my head” 看 做 动作 “sleep” 的 一 个 限定 条 件 ， 因 此 ， 它 也 可 以 被 当 
做 传递 给 sleep 方 法 的 一 个 参数 。 





在 现实 生活 中 ， 相 似 对 象 之 间 往 往 都 有 一 些 共 同 的 组 成 特征 。 例 如 
蜂 马 和 老鹰 都 具有 乌 类 的 特征 ， 因 此 它们 可 以 被 统称 为 乌 类 。 在 OOP 
中 ， 类 实际 上 融 是 对 象 的 设计 蓝图 或 制作 配方 。“ 对 象 * 这 个 词 ， 我 们 有 
时 候 也 叫做 “实例 *， 所 以 我 们 可 以 说 老鹰 是 鸟 类 的 一 个 实例 _ 包 _。 我 们 
可 以 基于 同一 个 类 创建 出 许多 不 同 的 对 象 。 因 为 类 更 多 的 是 一 种 模板 ， 
而 对 象 则 是 在 这 些 模板 的 基础 上 被 创建 出 来 的 实体 。 

但 我 们 要 明白 ，JavaScript 与 C++ 或 Java 这 种 传统 的 面 癌 对 象 语 言 不 
同 ， 它 实际 上 压根 儿 没 有 类 。 该 语言 的 一 切 都 是 基于 对 象 的 ， 其 依靠 的 
是 一 套 原型 (prototype 〉 系统 。 而 原型 本 身 实际 上 也 是 一 种 对 象 ， 我 们 
后 面 也 会 再 来 详细 讨论 这 个 问题 。 在 传统 的 面 加 对象 语言 中 ， 我 们 一 般 
会 这 样 描述 自己 的 做 法 :“ 我 基于 Person 类 创建 了 一 个 叫做 Bob 的 新 对 
象 。?* 而 在 这 种 基于 原型 的 面向 对 象 语言 中 ， 我 们 则 要 这 样 描 述 : “我 将 
现 有 的 Person 对 象 扩 展 成 了 一 个 叫做 Bob 的 新 对 象 。” 




















1.6.3 封装 


封装 是 另 一 个 与 OOP 相 关 的 概念 ， 其 主要 用 于 阐述 对 象 中 所 包含 的 
内 容 。 封 装 概念 通常 由 两 部 分 组 成 。 

相关 的 数据 (用 于 存储 属性 〉。 

基于 这 些 数据 所 能 做 的 事 〈 所 能 调用 的 方法 ) 。 

除 此 之 外 ， 这 个 术语 中 还 有 另 一 层 信息 隐藏 的 概念 ， 这 完全 是 另 一 
方面 的 问题 。 因 此 ， 我 们 在 理解 这 个 概念 时 ， 必 须要 留意 它 在 OOP 中 的 
具体 语 境 。 

以 一 个 MP3 播 放 器 为 例 。 如 果 我 们 假设 它 是 一 个 对 象 ， 那 么 作为 该 
对 象 的 用 户 ， 我 们 无 疑 需要 一 些 类 似 于 像 按 钮 、 显 示 屏 这 样 的 工作 接 
口 。 这 些 接口 会 帮助 我 们 使 用 该 对 象 〈 如 播放 歌曲 之 类 ) 。 至 于 它们 内 
部 是 如 何 工作 的 ， 我 们 并 不 清楚 ， 而 且 大 多 数 情 况 下 也 不 会 在 乎 这 些 。 
换 句 话 说， 这 些 接口 的 实现 对 我 们 来 说 是 隐藏 的 。 同 样 的 ， 在 OOP 中 也 
是 如 此 。 当 我 们 在 代码 中 调用 一 个 对 象 的 方法 时 ， 无 论 该 对 象 是 来 自我 
们 自己 的 实现 还 是 某 个 第 三 方 库 ， 我 们 都 不 需要 知道 该 方法 是 如 何 工作 
的 。 在 编译 型 语言 中 ， 我 们 甚至 都 无 法 查看 这 些 对 象 的 工作 代码 。 由 于 
JavaScript 是 一 种 解释 型 语言 ， 源 代码 是 可 以 查看 的 。 但 至 少 在 封装 概 
念 上 它们 是 一 致 的 ， 即 我 们 只 需要 知道 所 操作 对 象 的 接口 ， 而 不 必 去 关 
心 它 的 具体 实现 。 

关于 信息 隐藏 ， 还 有 另 一 方面 内 容 ， 即 方法 与 属性 的 可 见 性 。 在 某 
些 语 言 中 ， 我 们 能 通过 public. private. protected 这 些 关键 字 来 限定 方 
法 和 属性 的 可 见 性 。 这 种 限定 分 类 定义 了 对 象 用 户 所 能 访问 的 层次 。 例 
Qu, private 方法 只 有 其 所 在 对 象 内 部 的 代码 才 有 权 访 问 ， 而 public 方 法 
则 是 任何 人 都 能 访问 的 。 在 JavaScript 中 ， 尽 管 所 有 的 方法 和 属性 都 是 
public 的 ， 但 是 我 们 将 会 看 到 ， 该 语言 还 是 提供 了 一 些 隐藏 数据 的 方 
法 ， 以 保护 程序 的 隐 密 性 。 


























1.6.4 聚合 


所 谓 聚 合 ， 有 时 候 也 叫做 组 合 ， 实 际 上 是 指 我 们 将 几 个 现 有 对 象 合 
并 成 一 个 新 对 象 的 过 程 。 总 之 ， 这 个 概念 所 强调 的 就 是 这 种 将 多 个 对 象 
合 而 为 一 的 能 力 。 通 过 聚合 这 种 强 有 力 的 方法 ， 我 们 可 以 将 一 个 问题 分 
解 成 多 个 更 小 的 问题 。 这 样 一 来 ， 问 题 就 会 显得 更 易于 管理 〈 便 于 我 们 
各 个 击破 ) 。 当 一 个 问题 域 的 复杂 程度 令 我 们 难以 接受 时 ， 我 们 就 可 以 
考虑 将 它 分 解 成 春 干 子 问 题 区 ， 并 且 必 要 的 话 ， 这 些 问 题 区 还 可 以 再 继 
续 分 解 成 更 小 的 分 区 。 这 样 做 有 利于 我 们 从 几 个 不 同 的 抽象 层次 来 考虑 
这 个 问题 。 

例如 ， 个 人 电脑 是 一 个 非常 复杂 的 对 象 ， 我 们 不 可 能 知道 它 局 动 时 
所 发 生 的 全 部 事情 。 但 如 果 我 们 将 这 个 问题 的 抽象 级 别 降 低 到 一 定 的 程 
度 ， 只 关注 它 几 个 组 件 对 象 的 初始 化 工作 ， 例 如 显示 器 对 象 、 鼠 标 对 
象 、 键 盘 对 象 等 ， 我 们 就 很 容易 深入 了 解 这 些 子 对 象 情况 ， 然 后 再 将 这 
些 部 分 的 结果 合并 起 来 ， 之 前 那个 复杂 问题 就 迎刃而解 了 。 

我 们 还 可 以 找到 其 他 类 似 情况 ， 例 如 Book 是 由 一 个 或 多 个 author 对 
象 、publisher 对 象 、 和 在 干 chapter 对 象 以 及 一 组 table 对 象 等 组 合 〈 聚 合 ) 
而 成 的 对 象 。 

















1.6.5 继承 


通过 继承 这 种 方式 ， 我 们 可 以 非常 优雅 地 实现 对 现 有 代码 的 重用 。 
例如 ， 我 们 有 一 个 叫做 Person 的 一 般 性 对 象 ， 其 中 包含 一 些 姓名 、 出 生 
日 期 之 类 的 属性 ， 以 及 一 些 功 能 性 函数 ， 如 步行 、 谈 话 、 睡 觉 、 吃 饭 
等 。 然 后 ， 当 我 们 发 现 目 己 需要 一 个 Programmer 对 象 时 ， 当 然 ， 这 时 候 
你 可 以 再 将 Person 对 象 中 所 有 的 方法 与 属性 重新 实现 一 过 ， 但 除 此 之 外 
还 有 一 种 更 聪明 的 做 法 ， 即 我 们 可 以 让 Programmer 继 承 目 Person， 这 样 











就 省 去 了 我 们 不 少 工 作 。 因 为 Programmer 对 象 只 需要 实现 属于 它 自 己 的 
那 部 分 特殊 功能 (例如 “编写 代码 *”) ， 而 其 余部 分 只 需 重 用 Person 的 实 
现 即 可 。 

在 传统 的 OOP 环 境 中 ， 继 承 通常 指 的 是 类 与 类 之 间 的 关系 ， 但 由 于 
JavaScript 中 不 存在 类 ， 因 此 它 的 继承 只 能 发 生 在 对 象 之 间 。 

当 一 个 对 象 继承 自 男 一 个 对 象 时 ， 通 常会 往 其 中 加 入 新 的 方法 ， 以 
扩展 被 继承 的 老 对 象 。 我 们 通常 将 这 一 过 程 称 之 为 “B 继 承 自 A” 或 者 “B 
扩展 自 A”。 男 外 对 于 新 对 象 来 襄 ， 它 也 可 以 根据 自己 的 需要 ， 从 继承 的 
那 组 方法 中 选择 几 个 来 重新 定义 。 这 样 做 并 不 会 改变 对 象 的 接口 ， 因 为 
其 方法 名 是 相同 的 ， 只 不 过 当 我 们 调用 新 对 象 时 ， 访 方法 的 行为 与 之 前 
不 同 了 。 我 们 将 这 种 重 定义 继承 方法 的 过 程 叫 做 履 写 。 











在 之 前 的 例子 中 ， 我 们 的 Programmer 对 象 继承 了 上 一 级 对 象 Person 
的 所 有 方法 。 这 意味 着 这 两 个 对 象 都 实现 了 “talk” 等 方法 。 现 在 ， 我 们 
的 代码 中 有 一 个 叫做 Bob 的 变量 ， 即 便 是 在 我 们 不 知道 它 是 一 个 Person 
对 象 还 是 一 个 Programmer 对象 情 况 下 ， 也 依然 可 以 直接 调用 该 对 象 
的 *talk" 方 法 ， 而 不 必 担 心 这 会 影响 代码 的 正常 工作 。 类 似 这 种 不 同 对 
象 通 过 相同 的 方法 调用 来 实现 各 自行 为 的 能 力 ， 我 们 就 称 之 为 多 态 。 
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下 面 ， 让 我 们 再 来 回顾 一 下 这 些 概念 〈 见 表 1-1) 。 


表 1-1 

特征 描述 
Bob 是 一 个 男人 《后 者 是 一 个 对 象 ) 
Bob HÆF 1980 年 6 月 1 日 ， 男性， 黑头 发 
Bob 能 吃饭 、 睡 觉 、 喝 水 、 做 梦 ， 以 及 记录 自己 的 年 龄 
Bob 是 Programmer 类 的 一 个 实例 
Bob 是 一 个 由 Programmer 对 象 扩展 而 来 的 新 对 象 
Bob 对 象 中 包含 了 数据 (例如 出 生日 期 和 基于 这 些 数据 的 方法 (例如 
记录 年 龄 ) 
我 们 并 不 需要 知道 其 记录 年 龄 的 方法 是 如 何 实现 的 。 对 象 通常 都 可 以 拥有 一 
些 私有 数据 ， 例 如 对 半年 二 月 的 天 数 ， 我 们 就 不 知道 ， 而 且 也 不 会 想 知道 
Bob 只 是 是 整个 Web 开发 团队 对 象 的 一 部 分 , 此 外 开发 团队 对 象 还 包含 
了 一 个 Designer 对 象 Jill， 以 及 一 个 ProjectManager 对 象 Jack 


特征 描述 
Designer. ProjectManager. Programmer 都 是 分 别 扩展 自 Person 
对 象 的 新 对 象 
我 们 可 以 随时 调用 Bob. Jill 和 Jack 这 三 个 对 象 各 自 的 talk 方法 ， 它 们 
都 可 以 正常 工作 ,尽管 这 些 方 法 会 产生 不 同 的 结果 (如 Bob 可 能 谈 得 更 
多 的 是 代码 的 性 能 ，JH1 更 倾向 于 谈 代码 的 优雅 性 ， 而 Jack 强调 的 是 最 
后 期 限 )。 总 之 ， 每 个 对 象 都 可 以 重新 自 定义 它们 的 继承 方法 talk 


相应 概念 

WR 

属性 

方法 

传统 OOP 中 的 类 

基于 原型 OOP 中 的 原型 对 象 


封装 


续 表 


相应 概念 


继承 
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1.8 训练 环境 设置 


在 这 本 书 中 ， 凡 涉及 代码 的 我 们 都 强调 “自己 动手 ”>， 因 为 在 我 们 的 
理念 中 ， 学 好 一 门 编程 语言 最 好 的 途径 就 是 不 停 地 编写 代码 。 因 此 ， 这 
里 将 不 提供 任何 可 供 您 直接 复制 /粘贴 的 代码 下 载 。 恰 恰 相 反 ， 我 们 必 
须 得 让 您 杀 自 来 输入 代码 ， 并 观察 它们 是 如 何 工作 的 ， 思 考 需要 做 哪些 
调整 ， 这 样 周而复始 地 摆弄 它们 。 因 而 ， 当 您 想 答 试 这 些 代 码 示例 时 ， 
我 们 建议 您 使 用 JavaScript 控 制 台 这 一 类 的 工具 。 下 面 就 让 我 们 来 看 看 这 
些 工 具 是 如 何 使 用 的 。 

对 于 开发 人 员 来 说 ， 机 器 上 应 该 大 多 都 早已 安装 了 一 些 Web 浏 览 器 
了 ， 例 如 Firefox、Safari、Chrome 或 Internet Explorer。 而 所 有 现代 浏览 
器 中 都 应 该 自 带 了 JavaScript ”控制 台 组 件 ， 该 组 件 是 我 们 在 阅读 本 书 过 
程 中 始终 会 用 到 的 东西 ， 是 帮助 您 进行 语言 学 习 和 实验 的 环境 。 更 具体 
地 说 ， 尽 管 本 书 用 的 是 webKit 控 制 台 〈Safari 和 Chrome 都 文 持 该 控制 
a) ， 但 书 中 的 这 些 示例 在 任何 控制 台 上 都 是 能 正常 工作 的 。 


1.8.1 WebKit M r Web ALA 

















图 1-1 展 示 了 如 何在 控制 台中 通过 输入 代码 的 方式 将 google.com 主 页 
上 的 logo 换 成 我 们 自己 指定 的 图 片 。 如 您 所 见 ， 我 们 可 以 在 任何 页 面 上 
测试 这 段 JavaScript 代 码 。 

在 Chrome 和 Safari 中 ， 您 可 以 通过 右键 单 击 相 关 页 面 ， 并 选择 “审查 
元 素 ” 来 打开 控制 台 。 然 后 Web 审 查 工 具 就 会 出 现在 下 面 的 弹出 窗口 
中 ， 我 们 选择 其 标签 栏 上 的 “控制 台 ” 标 签 ， 束 来 到 了 真正 的 控制 侣 界面 
中 。 


然后 ， 我 们 直接 在 控制 台中 输入 代码 ， 按 下 回 车 键 ， 代 码 就 会 被 执 
行 。 其 返回 值 也 会 在 控制 台中 被 打印 出 来 。 代 码 会 在 当前 页 面 的 上 下 文 
环境 中 运行 ， 所 以 ， 如 果 您 在 其 中 输入 location.href， 控 制 台 就 会 返回 当 
前 页 面 的 ”URL。 除 此 之 外 ， 该 控制 台 还 具有 一 套 自 动 完成 功能 ， 其 工 
作 方 式 与 我 们 平时 所 用 的 操作 系统 命令 行 类 似 。 举 个 例子 ， 如 果 我 们 在 
其 中 输入 docu， 然 后 按 Tab 键 ，docu 就 会 被 自动 补 全 为 document。 这 时 
如 果 再 继续 输入 一 个 “”(〈 点 操作 符 ) ， 我 们 就 可 以 通过 重复 按 Tab 键 的 
方式 来 过 历 document 对 象 中 所 有 可 调用 的 方法 和 属性 。 
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CD | Errors Warnings Logs 
> var img = document. images [1]; 
undefined 
mg.src = “http://www. packtpub. com/sites/default/files/bookimages/1847194141. jpg" 
ka. / {ww packtpub. com/sites/default/files/bookimages/1847194141. jpg" 





> img.style.height = "auto" 
"auto" 





图 1-1 
男 外 通过 上 下 稀 头 键 ， 我 们 还 可 以 随时 从 相关 列表 中 找 回 已 经 执行 
过 的 命令 ， 并 在 控制 台中 重新 执行 它们 。 
通 弟 情况 下 ， 控 制 台 只 提供 单行 输入 ， 但 我 们 可 以 用 分 号 做 分 割 符 
来 执行 多 个 JavaScript 语 句 。 而 如 果 您 需要 更 多 行 代码 的 话 ， 也 可 以 通过 
组 合 键 shift+Enter 来 实现 换行 ， 在 这 种 情况 下 代码 不 会 被 立即 执行 。 


1.8.2 Mac 上 的 JavaScriptCore 
在 Mac 上 ， 我 们 事实 上 不 用 浏览 器 也 可 以 通过 终端 来 执行 


JavaScript. 

如 果 您 之 前 没有 使 用 过 终端 ， 可 以 通过 Spotlight 找 到 它 。 打 开 终 
之 后 ， 在 其 中 输入 : 

alias 
jsc="/ onan enn avaScriptCore.framework/Versions/Currel 

Zi AISC (BJavaScriptCore) 设置 了 一 个 别名 。JSC 其 实 是 

| 擎 的 一 部 分 。Mac 系 统 自 带 有 该 引擎 

我 们 也 可 以 直接 将 这 个 alias 命 令 放 入 一 /.profile 文 件 ， 这 样 每 次 打开 
终端 时 ， 旬 备 过 jsc 这 个 别名 来 启动 JavaScriptCore 了 。 

现在 ， 终 端 在 任何 目录 下 都 可 以 通过 直接 输入 jse 来 打开 其 交互 环 
境 了 。 然 后 您 可 以 在 其 中 输入 相关 的 JavaScript 表达 式 。 按 下 Enter 键 
Ja» 表达 大 式 的 结果 就 会 被 显示 出 来 ， 如 图 1-2 所 示 。 


Last login: Tue May 31 01:07:35 on ttys@02 
stoyanstefanov:~ stoyanstefanov$ jsc 
> 1+1 

2 

> var a = "hello"; 

undefined 

>a 

hello 

> var b = "console"; 

undefined 

>b 

console 





>p+ * “+b 
hello console 
> 





如 今 ， 几 乎 所 有 现代 浏览 器 都 有 自 融 的 控制 台 。 除 了 之 前 提 到 的 
Chrome 及 Safari 的 控制 台 之 外 ，FireFox 浏 览 器 的 所 有 版 本 也 都 能 安装 
Firebug 组 件 ， R 台 。 另 外 ， 新 版 的 Firefox 中 也 有 一 
个 自 带 的 控制 台 ， 您 可 以 通过 麻 单 栏 “ 工 具 /Web 开 发 者 /Web 控 制 台 ”来 
打开 它 ， 如 图 1-3 所 示 。 
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图 1-3 
而 Internet Explorer 从 第 8 版 开始 ， 只 要 按 下 F12 键 就 可 以 打开 开发 者 
工具 组 件 。 打 开 后 ， 按 Script 标签 栏 就 可 进入 控制 台 
另外 ， 通 过 Node.js 的 交互 环境 来 学 习 JavaScript 也 是 一 个 不 错 的 
选择 。 您 可 以 从 http:/nodejs.org 中 获取 并 安装 Node.js， 然 后 在 终端 中 答 
试 其 控制 台 ， 如 图 1-4 所 示 。 





GS stoyanstefanov — bash 一 79x21 


stoyanstefmbp15:~ stoyanstefanov$ node 
> var a = 1; var b = 2; 

undefined 

> a + b; 


> 

(*C again to quit) 

> 

stoyanstefmbp15:~ stoyanstefanov$ cat test.js 
var a 101; 


var b = 202; 


console. logla + b); 

stoyanstefmbp1i5:~ stoyanstefanov$ node test.js 
303 

stoyanstefmbp15:~ stoyanstefanov$ p 





图 1-4 
如 您 所 见 ， 我 们 既 可 以 用 Node.js 的 控制 台 测试 一 些小 型 示例 ， 同 时 
也 可 以 写 一 些 较 长 的 shell 脚 本 如 截图 中 的 test.js〉， 然 后 以 
scriptname.js 的 形式 在 Node.js 的 终端 中 执行 。 





1.9 本 章 小 结 


在 这 一 章 中 ， 我 们 首先 介绍 了 JavaScript 语言 的 发 展 历程 和 现状 。 
然后 ， 对 面向 对 象 程序 设计 的 概念 进行 了 一 些 基本 论述 。 接 着 ,我 们 向 
您 详细 前 述 了 为 什么 JavaScript 不 是 传统 的 基于 类 的 面 同 对 象 语言 ， 而 
是 一 套 独 特 的 原型 系统 。 现 在 ， 您 已 经 为 下 一 步 深入 学 习 JavaScript 语 
言 、 竺 握 其 面向 对 象 特性 打下 了 一 定 的 基础 ， 但 让 我 们 一 步 步 来 。 

下 一 章 将 会 介绍 JavaScript 的 数据 类 型 (JavaScript 的 数据 类 型 非常 





少 ) ， 以 及 条 件 、 循 环 语句 和 数组 。 如 果 您 确信 自己 已 经 掌握 了 这 些 知 
识 ， 并 且 对 该 章 结尾 处 的 那 几 个 小 练习 完全 没有 疑问 的 话 ， 那 么 就 请 自 
行 跳 过 这 一 章 吧 。 









































第 7 音 其 w KAJ 、 E 
ZH. EA RAGERIA N 


在 深入 学 习 JavaScript 的 面 同 对 象 特性 之 前 ， 我 们 首先 要 了 解 一 些 基 
础 性 知识 。 在 这 一 和 章 中 ， 我 们 将 会 从 以 下 几 个 方面 入 手 。 

JavaScript 中 的 基本 数据 类 型 ， 例 如 字符 串 和 数字 等 。 

数组 。 

常用 操作 符 ， 例 如 +、-、delete、typeof 等 。 

控制 流 语 句 ， 例 如 循环 和 if-else 条 件 表达 式 等 。 





2.1 变量 


通常 ， 变 量 都 是 用 来 存储 数据 的 ， 即 它 是 存放 具体 数值 的 容器 。 当 
我 们 编写 程序 时 ， 用 变量 来 表示 实际 数据 会 更 方便 些 。 尤 其 是 当 我 们 需 
要 多 次 使 用 某 个 数字 时 ， 使 用 变量 pi 显然 要 比 直接 写 数字 值 
3.141592653589793 方 便 得 多 。 而 且 ， 之 所 以 称 它们 为 变量， 就 是 因为 
它们 所 存储 的 数据 在 初始 化 之 后 仍然 是 可 以 改变 的 。 另 外 ， 在 编写 代码 
时 我 们 往往 也 可 以 用 变量 来 代表 某 些 程序 运行 前 还 未 知 的 数据 ， 例 如 某 
个 计算 的 结果 值 。 

变量 的 使 用 通常 可 分 为 以 下 两 个 步骤 。 

声明 变量 。 

初始 化 变量 ， 即 给 它 一 个 初始 值 。 

我 们 可 以 使 用 var 语 句 来 声明 变量 ， 像 这 样 : 

Var ai 


var thisIsA Variable; 


























var _and_this too; 

var mix12three; 

变量 名 可 以 由 字母 、 数 字 、 下 划 线 及 美元 符号 组 合 而 成 。 但 不 能 以 
数字 开头 ， 像 下 面 这 样 是 不 被 允许 的 : 

var 2three4five; 

而 所 谓 的 变量 初始 化 ， 实 际 上 指 的 是 变量 的 第 一 次 赋值 。 我 们 可 以 
有 以 下 两 种 选择 。 

先 声 明 变 量 ， 然 后 再 初始 化 。 

声明 变量 与 初始 化 同步 进行 。 

下 面 是 后 一 种 写法 的 例子 : 





vara= 1; 
这 样 ， 我 们 就 声明 了 一 个 名 为 a、 值 为 1 的 变量 。 
另外 ， 我 们 也 可 以 在 单个 var 语句 中 同时 声明 《〈 并 初始 化 ) 多 个 变 
只 要 将 它们 分 别 用 逗号 分 开 即 可 ， 例 如 : 
var v1, v2, v3 = ‘hello’, v4 = 42, v5; 
有 时 候 出 于 代码 可 读 性 方面 的 考虑 ， 我 们 可 能 还 会 这 么 写 : 
var v1, 
v2, 
v3 = ‘hello’, 
v4 = 42, 
v5; 
变量 名 中 的 $ 符 号 
变量 名 中 可 以 使 用 $ 符 号 ， 例 如 $myvar， 或 者 品味 还 可 以 更 独特 一 
点 ，my$var。 按 照 变 量 命名 规范 ， 美 元 符号 允许 出 现在 任意 位 置 ， 但 其 
实 旧版 的 ECMA 标 准 是 不 或 励 使 用 美元 符号 命名 变量 的 ， 它 只 建议 在 生 
成 代码 《〈 即 由 其 他 程序 输出 的 代码 ) 中 使 用 。 但 显然 JavaScript 社 区 并 没 
有 接受 该 建议 ， 在 实际 项 目 中 ， 以 单独 一 个 $ 符 为 函数 名 的 做 法 比比 篇 
是 。 
区 分 大 小 写 
在 JavaScript 语 言 中 ， 变 量 名 是 区 分 大 小 写 的 。 为 了 证 明 这 一 点 ， 我 
们 可 以 在 JavaScript 控 制 台 中 测试 下 列 语句 (每 输入 一 行 按 一 次 Enter 
键 ) : 
var case_matters = ‘lower’; 
var CASE_MATTERS = ‘upper’; 
case_matters; 
CASE_MATTERS; 
为 了 减少 按键 的 次 数 ， 在 输入 第 三 行 时 ， 我 们 可 以 先 键入 ca 然后 按 


an 


oll. 

















Tab 键 〈 或 右 方 回 键 )》 ， 控 制 台 会 自动 将 其 补 全 为 case_matters。 最 后 一 
行 也 是 如 此 ， 我 们 只 需 先 输入 CASE 然 后 直接 按 Tab 即 可 。 输 入 完成 之 
后 ， 最 终结 果 如 图 2-1 所 示 。 

为 方便 起 见 ， 以 后 我 们 将 用 代码 形式 来 代 丛 截图 。 上 面 的 例子 可 以 
表示 如 下 : 

> var case_matters = 'lower'; 

> var CASE_MATTERS = ‘upper’; 

> case_matters; 

"lower" 

> CASE MATTERS; 

"upper" 

如 您 所 见 ， 大 于 号 C) 之 后 的 内 容 就 是 我 们 输入 的 代码 ， 而 其 余 
部 分 则 是 控制 台 输 出 的 结果 。 需 要 强调 的 是 ， 当 您 测试 类 似 的 代码 时 ， 
应 该 根据 实验 的 实际 情况 来 调整 相关 代码 。 这 才能 有 助 于 您 更 好 地 理解 
语言 的 工作 方式 。 
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> var case_matters = 'lower'; 
undefined 

> var CASE_MATTERS = 'upper'; 
undefined 


case_matters 


"lower" 


> CASE_MATTERS 
“upper" 
> 





图 2-1 
读者 有 时 可 能 会 看 到 某 个 表达 式 在 控制 台中 的 输出 结果 为 

undefined。 这 大 多 数 情况 下 是 完全 可 以 忽略 的 ， 但 您 有 没有 想 过 ， 为 什 
么 这 些 表达 式 会 输出 ”undefined 呢 ? 那 是 因为 控制 台 在 执行 完 我 们 输入 
的 表达 式 之 后 ， 总 是 要 输出 该 表达 式 的 运行 结果 。 但 有 一 些 表 达 式 〈 例 
如 var a = 1;) 是 没有 任何 返回 值 的 。 在 这 种 情况 下 ， 控 制 台 就 会 隐 式 打 
印 一 个 undefined。 相 反 地 ， 当 一 个 表达 式 确 实 有 返回 值 时 ， 比 如 之 前 
的 例子 中 的 case_matters 或 是 1+1 之 类 的 表达 式 ， 控 制 台 就 会 将 该 表达 式 
的 实际 返回 值 打 印 出 来 。 当 然 ， 并 不 是 所 有 的 控制 台 都 会 在 没有 返回 值 
时 打印 undefined 值 ， 例 如 Firebug 控 制 台 就 不 会 这 样 做 。 
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果 的 符号 。 为 了 更 清晰 地 表达 该 术语 的 含义 ， 我 们 先 来 看 一 个 具体 的 示 


例 : 


>1+2; 

3 

这 段 代码 包含 了 以 下 几 点 信息 。 

+ 是 一 个 操作 符 。 

该 操作 是 一 次 加 法 运算 。 

输入 值 为 1 和 2 输入 值 也 叫做 操作 数 〉。 

结果 值 为 3。 

1+2 这 个 整体 称 为 表达 式 。 

在 这 里 ，1 和 2 都 是 直接 参与 加 法 运算 的 。 接 下 来 我 们 要 将 它们 换 





成 变量 ， 并 再 刃 外 声明 一 个 变量 来 存储 运算 结果 。 有 具体 如 下 : 


>vara=1; 

> var b = 2; 
>at 1; 

2 

>b+2; 

4 

>a + b; 

3 

> var c =a + b; 


>C; 


3 





在 表 2-1 中 ， 我 们 列 出 了 一 些 基 本 的 算术 运算 符 。 








表 2-1 

操作 符 相关 操作 代码 示例 
>1+2 

+ 加 法 运算 





续 表 


操作 符 相关 操作 


++ 


取 模 运算 ， 即 求 除法 运算 的 余数 





自 增 1 运算 


代码 示例 


> 99,99) = TL7 
88.99 


取 模 运算 对 于 测试 一 个 整数 的 奇偶 性 很 有 用 处 ， 只 需 
要 让 该 数 对 2 执行 取 横 运算 ， 返 回 1 的 便 是 奇数 ， 返 
回 0 则 都 为 偶数 

> 4% 2; 


后 置 的 + 操作 会 先 返 回 该 值 ， 然 后 再 增 1 
> var a = 123; 

> var b = att; 

>= be 

123 

> a; 

124 

前 置 的 ++ 操 作 会 先 将 值 增 1， 然 后 再 返回 
> var a = 123; 

> var b = ++a; 

= be 

124 

> as 


124 


操作 符 相关 操作 代码 示例 
后 置 的 一 一 操作 
> var a = 123; 


> var b = a--; 


> bs 





Ss 自 减 1 运算 
前 置 的 一 一 操作 


> var a = 123; 
> var b = --a; 
> bs 


122 








事实 上 ， 当 我 们 输入 var a = 1; 这 样 的 语句 时 ， 所 执行 的 也 是 一 种 独 
立 的 操作 。 这 种 操作 叫做 纯 赋 值 ， 因 而 “=” 也 被 称 为 简单 赋值 运算 符 
(simple assignment operator) 。 

除 此 之 外 ，JavaScript 中 还 有 一 组 由 算术 运算 和 赋值 操作 组 合 而 成 的 
操作 符 。 我 们 称 它 们 为 复合 操作 符 (compound operator) 。 这 些 操作 符 
能 让 我 们 的 代码 显得 更 为 紧 竣 。 下 面 来 看 几 个 示例 : 


>vara=5; 











>at=3; 

8 

在 该 例 中 ，a += 3; 实 际 上 就 相当 于 a = a + 3; 的 缩写 形式 。 
>a -= 3; 

5 

同 理 ， 这 里 的 a -= 3; 等 同 于 a = a - 3;。 


以 此 类 推 : 

> a *= 2; 

10 

>a/=5; 

2 

>a %= 2; 

0 

除了 我 们 已 经 提 到 的 算术 运算 与 赋值 操作 以 外 ，JavaScript 中 还 有 
其 他 各 种 类 型 的 操作 符 。 我 们 将 会 在 后 面 的 章节 中 陆续 看 到 。 

最 佳 实践 

表达 式 应 始终 是 以 分 号 为 结束 符 的 。 尽 管 JavaScript 本 身 设 有 分 号 补 
全 机 制 ， 即 如 果 您 筷 了 在 一 行 表达 式 之 后 添加 分 号 ， 该 位 置 就 会 被 隐 式 
地 补 上 一 个 分 写 。 但 这 种 机 制 同时 也 是 出 错 的 主要 源头 之 一 。 所 以 ， 最 
好 还 是 我 们 目 己 要 记得 在 表达 式 结束 之 后 明确 地 用 分 号 来 关闭 该 表达 
式 。 换 句 话 说 ， 虽 然 > 1 + 1 与 > 1 + 1; 都 属于 合法 的 表达 式 ， 但 为 了 强 
调 这 一 展 好 的 编程 习惯 ， 本 书 将 一 律 采 用 后 一 种 形式 。 

















2.3 基本 数据 类 型 


我 们 在 程序 中 所 使 用 的 任何 值 都 是 有 类 型 的 。JavaScript 仅 有 以 下 
儿 大 基本 数据 类 型 。 

1. 数字 一 一 包括 浮 点 数 与 整数 ， 例 如 这 些 都 属于 数字 : 1、100、 
3.14. 








.字符 串 一 一 包括 由 任意 数量 字符 组 成 的 序列 ， 例 
m "a", "one", "one 2 three". 

3. 布尔 值 一 一 包括 true 和 false。 

4. undefined 当 我 们 试图 访问 一 个 不 存在 的 变量 时 ， 束 会 得 到 
一 个 特殊 值 : undefined。 除 此 之 外 ， 使 用 已 声明 却 未 赋值 的 变量 也 会 如 
此 。 因 为 JavaScript 会 自动 将 变量 在 初始 化 之 前 的 值 设 定 为 ”undefined 。 
而 undefined 类 型 的 值 只 有 一 个 一 undefined。 

5. null 一 一 这 是 另 一 种 只 包含 一 个 值 的 特殊 数据 类 型 。 所 谓 的 null 
值 ， 通 常 是 指 没 有 值 或 空 值 ， 不 代表 任何 东西 。null 与 Undefined 最 大 的 
不 同 在 于 ， 被 赋予 nul 的 变量 通常 被 认为 是 已 经 定义 了 的 ， 只 不 过 它 不 
代表 任何 东西 。 关 于 这 一 点 ， 我 们 稍 后 会 通过 一 些 具 体 的 示例 来 解释 。 

人 被 认为 是 一 个 对 象 。 甚 至 有 
时 候 我 们 也 会 将 null 视 为 对 象 ， 这 听 起 来 有 些 尴 罚 一 一 这 是 一 个 不 代表 
任何 东西 的 对 象 ( 东 西 )。 我 们 将 会 在 第 4 章 : 对 象 中 深入 前 述 对 象 的 
概念 ， 现 在 我 们 只 需要 记 住 一 点 ，JavaScript 中 的 数据 类 型 主要 分 为 以 下 
两 个 部 分 : 

基本 类 型 (上面 列 出 的 五 种 类 型 〉。 

非 基 本 类 型 〈 即 对 象 ) 。 























2.3.1 查看 类 型 操作 符 一 一 typeof 


如 果 我 们 想 知 道 菏 个 变量 或 值 的 类 型 是 什么 ， 可 以 调用 特殊 操作 符 
typeof。 访 操作 符 会 返回 一 个 代表 数据 类 型 的 字符 串 ， 以 下 是 其 可 能 返 
回 的 结果 : 

"number"; 

"string"; 

"boolean"; 

"undefined"; 

"object"; 

"function" 。 

在 接 下 来 的 几 节 中 ， 我 们 将 会 在 例子 中 逐一 对 五 种 基本 数据 类 型 使 
用 typeof 操 作 。 


2.3.2 数字 


最 简单 的 数字 类 型 当然 就 是 整数 了 。 如 有 果 我 们 将 一 个 变量 赋值 为 
1， 并 对 其 调用 typeof 操 作 符 ， 控 制 台 就 会 返回 字符 串 "number": 

>varn=1; 

> typeof n; 

"number" 

>n= 1234; 

> typeof n; 

"number" 

该 例 中 有 一 点 值得 注意 ， 即 当 您 第 二 次 设置 某 变量 的 值 时 ， 融 无 需 
再 用 到 var 语 名 了 。 

浮上 点数 《 即 含 小 数 部 分 的 数字 ) 显然 也 是 Number 类 型 的 一 种 : 








> var n2 = 1.23; 

> typeof n2; H 

"number" 

当然 ， 我 们 也 可 以 直接 对 一 个 数值 调用 typeof， 并 非 一 定 得 要 事先 
将 其 赋值 给 变量 。 

> typeof 123; 





"number" 

2.3.2.1 八进制 与 十 六 进 制 

当 一 个 数字 以 0 开头 时 ， 就 表示 这 是 一 个 八进制 数 。 例 如 ， 八 进 制 
数 0377 所 代表 的 就 是 十 进 制 数 255。 

> var n3 = 0377; 


> typeof n3; 

"number" 

>n3; 

255 

如 您 所 见 ， 例 子 中 最 后 一 行 所 输出 的 就 是 该 八进制 数 的 十 进 制 表示 
形式 。 


或 许 您 对 八进制 数 还 不 太 熟 悉 ， 但 十 六 进 制 您 应 该 不 会 感到 陌生 ， 
因为 CSS 样式 表 中 的 颜色 值 在 大 多 数 情况 下 就 是 用 十 六 进 制 定义 的 。 

在 CSS 中 ， 我 们 有 好 几 种 方式 定义 颜色 ， 其 中 的 两 种 如 下 所 示 。 

使 用 十 进 制 数 分 别 指定 R( 红 ) 、G ( 绿 ) B GE) 的 值 BL, W 
值 范 围 都 为 0 一 255。 例 如 rgb(0,0,0) 代 表 黑 色 、rgb(255,0,0) 代 表 红 色 〈 红 
值 达 到 最 大 值 ， 而 绿 和 蓝 都 为 0 值 〉。 

使 用 十 六 进 制 数 ， 两 个 数位 代表 一 种 色 值 ， 依 次 是 R G B. 例 
如 #000000 代表 黑色 、#ff0000 代 表 红 色 ， 因 为 十 六 进 制 的 ff 就 等 于 255。 

在 JavaScript 中 ， 我 们 会 用 0x 前 组 来 表示 一 个 十 六 进 制 值 





(hexadecimal value， 人 简称 为 hex) 。 

> var n4 = 0x00; 

> typeof n4; 

"number" 

> n4; 

0 

> var n5 = Oxff; 

> typeof n5; 

"number" 

> n5; 

255 

2.3.2.2 指数 表示 法 

一 个 数字 可 以 表示 成 lel (或 者 let1、1E1、1E+1) 这 样 的 指数 形 
式 ， 意 思 是 在 数字 1 后 面 加 1 个 0， 也 就 是 10。 同 理 ，2e+3 的 意思 是 在 数 
字 2 后 面 加 3 个 0， 也 就 是 2000。 

> lel; 

10 

> let+1; 

10 

> 2e+3; 

2000 

> typeof 2e+3; 

"number" 

此 外 ， 我 们 也 可 以 将 2e+3 理解 为 将 数字 2 BZ) BUR IAA = Biro 
依照 同 理 ，2e-3 也 就 能 被 理解 是 将 数字 2 的 小 数 点 左 移 三 位 。 





> 2e-3; 

0.002 

> 123.456E-3; 

0.123456 

> typeof 2e-3; 

"number" 

2.3.2.3 Infinity 

在 JavaScript 中 ， 还 有 一 种 叫做 Pnfinity 的 特殊 值 。 它 所 代表 的 是 超出 
了 JavaScript 处 理 范围 的 数值 。 但 Infinity 依然 是 一 个 数字 ， 我 们 可 以 在 
控制 台 使 用 typeof 来 测试 mmfinity。 当 我 们 输入 le308 时 ， 一 切 正 常 ， 但 
一 旦 将 后 面 的 308 改 成 309 就 出 界 了 。 实 践 证 明 ，JavaScript 所 能 处 理 的 最 
大 值 是 1.7976931348623157e+308， 而 最 小 值 为 5e-324。 

> Infinity; 

Infinity 

> typeof Infinity; 

"number" 

> 1e309; 

Infinity 

> 1e308; 

1e+308 


另外 ， 任 何 数 除 以 0 结果 也 为 Infinity: 

> vara=6/0; 

> al 

Infinity 

Infinity 表 示 的 是 最 大 数 〈 或 者 比 最 大 数 还 要 大 的 数 ) ， 那 么 最 小 数 
该 如 何 表 示 呢 ?答案 是 在 Infinity 之 前 加 一 个 负 号 : 


> var i = -Infinity; 





>j; 

-Infinity 

> typeof i; 

"number" 

这 是 不 是 意味 痢 我 们 可 以 得 到 双 倍 的 Infinity We? 毕竟 我 们 可 
以 从 0 加 到 Infinity， 也 可 以 从 0 减 到 -Infinity。 事 实 上 这 是 不 可 能 的 ， 
为 即便 将 正 负 Infinity 相 加 ， 我 们 也 不 会 得 到 0， 而 是 会 得 到 一 个 叫做 
NaN (Not A Number 的 缩写 ， 即 不 是 数字 ) 的 东西 。 

> Infinity - Infinity; 

NaN 

> -Infinity + Infinity; 

NaN 

另外 ，Infinity 与 其 他 任何 操作 数 执行 任何 算术 运算 的 结果 也 都 等 于 
Infinity。 

















> Infinity - 20; 
Infinity 

> -Infinity * 3; 
-Infinity 

> Infinity / 2; 
Infinity 


> Infinity — 99999999999999999; 

Infinity 

2.3.2.4 NaN 

还 记得 之 前 见 过 的 那个 “NaN 吗 ? 尽管 该 值 的 名 字 叫 做 “不 是 数 
字 ”， 但 事实 上 它 依然 属于 数字 类 型 ， 只 不 过 是 一 种 特殊 的 数字 罢 了 。 

> typeof NaN; 





"number" 

> var a= NaN; 

>a; 

NaN 

如 果 我 们 在 算术 运算 中 使 用 了 不 恰当 的 的 操作 数 ， 导 致 运算 失败 ， 
该 运算 就 会 返回 NaN。 例 如 当 我 们 试图 让 数字 10 与 字符 "f" 相 乘 时 ， 结 
束 会 为 NAN， 因 为 "f" 显 然 是 不 文 持 乘法 运算 的 。 


>vara=10* "f"; 





>a; 

NaN 

而 且 NaN 是 有 传染 性 的 ， 只 要 我 们 的 算术 运算 中 存在 一 个 NaN， 整 
个 运算 就 会 失败 。 

>1+2+NaN; 

NaN 





2.3.3 字符 串 


字符 串通 常 指 的 是 某 段 用 于 表示 文本 的 字符 序列 。 在 = JavaScript 
中 ， 一 对 双 引 号 或 单 引 号 之 间 的 任何 值 都 会 被 视 为 一 个 字符 串 。 也 就 是 
说 ， 如 果 说 1 是 一 个 数字 的 话 ， 那 么 "1" 就 是 一 个 字符 串 了 。 在 一 个 字符 
串 前 使 用 typeof 操 作 符 会 返回 "string"。 


> var s = "some characters"; 

> typeof s; 

"string" 

> var s = 'some characters and numbers 123 5.87’; 

> typeof s; 

"string" 

字符 串 中 可 以 包含 数字 ， 例 如 : 

>vars='1'; 

> typeof s; 

"string" 

如 果 引 号 之 间 没 有 任何 东西 ， 它 所 表示 的 依然 是 一 个 字符 串 〈 即 空 
字符 串 ) : 


> var s = ""; typeof s; 








"string" 

在 上 一 人 小节 ， 当 我 们 在 两 个 数字 之 间 使 用 加 号 时 ， 所 执行 的 是 加 法 
运算 。 但 在 字符 串 中 ， 这 是 一 个 字符 串 拼 接 操 作 ， 它 返回 的 是 两 个 字符 
串 拼 接 之 后 的 结果 。 例 如 : 

> var s1 = "web"; 

> var s2 = "site"; 

>vars=sl+s2; 

>s; 

"website" 

> typeof s; 

"string" 

像 + 这 样 的 双 功 能 操作 符 可 能 会 带 来 一 些 错 误 。 因 此 ， 我 们 如 果 想 
执行 拼接 操作 的 话 ， 最 好 确保 其 所 有 的 操作 数 都 是 字符 串 。 同 样 地 ， 在 
执行 数字 相 加 时 ， 我 们 也 要 确保 其 所 有 的 操作 数 都 是 数字 。 人 至 于 如 何 做 


到 这 一 点 ， 我 们 将 会 在 后 续 章 节 中 详细 讨论 。 

2.3.3.1 字符 串 转换 

当 我 们 将 一 个 数字 字符 串 用 于 算术 运算 中 的 操作 数 时 ， 该 字符 串 会 
在 运算 中 被 当做 数字 类 型 来 使 用 。 “由 于 加 法 操作 符 的 歧义 性 ， 这 条 规 
则 不 适用 于 加 法 运算 。) 

> vars ='f'; 


>s=3*s; 





> typeof s; 

"number" 

>s; 

3 

> var s = 'f'; 

> s++; 

> typeof s; 

"number" 

>s; 

2 

于 是 ， 将 数字 字符 串 转 换 为 数字 就 有 了 一 种 偷懒 的 方法 只 需 将 该 
字符 串 与 1 相 乘 即 可 。 当然， 更 好 的 选择 是 调用 parseIntO 函 数 ， 关 于 
这 点 ， 我 们 将 会 在 下 一 半 中 介绍 。) 

> var s = "100";typeof s; 

"string" 

>s=s*1; 

100 

> typeof s; 

"number" 


如 果 转 换 操作 失败 了 ， 我 们 残 会 得 到 一 个 NaN 值 。 


> var movie = '101 dalmatians'; 

> movie * 1; 

NaN 

此 外 ， 将 其 他 类 型 转换 为 字符 串 也 有 一 种 偷懒 的 方法 ， 
与 空 字符 串 相 加 即 可 : 

>varn=1; 

> typeof n; 

"number" 

>n=""4+n; 

"q" 

> typeof n; 

"string" 

2.3.3.2 特殊 字符 串 

在 表 2-2 中 ， 我 们 列 出 了 一 些 具 有 特殊 含义 的 字符 串 。 

表 2-2 


示例 


> var s = 'I don't know'; 


这 样 做 是 错误 的 ， 因 为 JavaScript 会 将 “I don” 
\ 是 转 义 字符 视 为 字符 串 ， 而 其 余部 分 则 将 会 被 视 为 无 效 代 
当 我 们 想 要 在 字符 串 中 使 用 引号 时 ， 就 | 码 。 正 确 做 法 如 下 ; 

必须 对 它们 进行 转 义 ， 这 样 JavaScript 








> Var 6S = "I don\'t know'; 
才 不 会 将 其 认 作 字符 串 的 终止 符 a Te Th 
同 理 ， 当 我 们 需要 在 字符 串 中 使 用 反 斜 | > var s = "I don't know"; 
线 本 身 时 ， 也 需要 用 另 一 个 反 斜 线 对 其 > var s = '"Hello", he said.'; 
aan > var s = "\"Hello\", he 
进行 转 义 said- "z 
转 义 转 义 字符 本 身 ; 
> var s = "1\\2"; s; 
i 
= NL NN 
> 3; 
1 
2 
3 
以 下 所 有 语句 : 


e > vars ='1\r2'; 
e > var s = 'l\n\r2'; 
e > var s = '1\r\n2'; 


回 车 符 结果 都 为 : 

> S; 

"1 

sr 

> var gs = "I\E2" 
制 表 符 se 

at a 


示例 








下 面 是 作者 的 名 字 在 保加利亚 语 中 用 西里 尔 字 
母 的 拼写 : 


\u043D"; 
"Croan" 


除 此 之 外 ， 还 有 一 些 很 少 被 使 用 的 特殊 字符 ， 例 如 : \b GER 
v (纵向 制 表 符 ) . \E ( 换 页 符 ) 等 。 


2.3.4 布尔 什 


布尔 类 型 中 只 有 两 种 值 : true 和 false。 它 们 使 用 时 不 需 加 引号 。 
> var b = true; 

> typeof b; 

"boolean" 

> var b = false; 

> typeof b; 

"boolean" 

如 果 true 或 false 在 引号 内 ， 它 就 是 一 个 字符 串 。 

> var b = "true"; 

> typeof b; 

"string" 

2.3.4.1 逻辑 运算 符 

JavaScript 中 有 三 种 馆 辑 运算 符 ， 它 们 都 属于 布尔 运算 。 分 别 是 : 
WHE CHL) ; 

&& 一 一 逻辑 与 ; 

| 一 逻辑 或 。 

在 JavaScript 中 ， 如 采 我 们 想 描述 某 事物 的 非 芮 状态 ， 束 可 以 考虑 


! 





使 用 逻辑 非 运算 符 : 
> var b = !true; 
> b; 
false 


而 如 果 我 们 对 true 执 行 两 次 逻辑 非 运 算 的 话 ， 其 结 采 应 该 束 等 于 原 


> var b = !!true; 

> b; 

true 

如 果 我 们 对 一 个 非 布 尔 值 执行 逻辑 运算 ， 那 么 该 值 束 会 在 计算 过 程 
中 被 转换 为 布尔 值 : 

> var b = "one"; 

> lb; 

false 

如 您 所 见 ， 上 例 中 的 字符 串 "one" 是 先 被 转换 为 布尔 值 true 然后 再 
取 反 的 ， 结 果 为 false。 如 果 我 们 对 它 取 反 两 次 ， 结 果 就 会 为 true。 例 
如 : 

> var b = "one"; 

> IIb; 

true 

借助 双重 取 反 操作 ， 我 们 可 以 很 轻易 地 将 任何 值 转换 为 相应 的 布尔 
值 。 理 解 各 种 类 型 的 值 转换 为 相应 布尔 值 的 规则 非常 重要 。 除 了 下 面 所 
列 出 特定 值 以 外 〔 它 们 将 被 转换 为 false 〉， 其 余 大 部 分 值 在 转换 为 布尔 
值 时 都 为 true。 

空 字符 串 "。 

null. 


undefined. 


数字 0。 

数字 NaN。 

布尔 值 false。 

这 6 个 值 有 时 也 会 被 我 们 称 为 falsy 值 ， 而 其 他 值 则 被 称 为 truthy 值 
(包括 字符 串 "0"、""、"false" 等 ) 。 

接 下 来 ， 让 我 们 来 看 看 另外 两 个 操作 符 一 一 逻辑 与 〈&&) 和 逻辑 
BY (|) 的 使 用 示例 。 当 我 们 使 用 && 操 作 符 时 ， 当 且 仅 当 该 操作 所 有 操 
作 数 为 true 时 ， 操 作 结 果 才 为 tue。 而 | 操作 则 只 需要 其 中 一 个 操作 数 为 
true， 操 作 结 果 即 为 true。 


> var b1 = true, b2 = false; 








> b1 || b2; 

true 

> bl && b2; 

false 

在 表 2-3 中 ， 我 们 列 出 了 所 有 可 能 的 情况 及 其 相应 结果 。 

表 2-3 
操作 结果 

true && true true 
true && false false 
false && true false 
false && false false 
true | true true 
true || false true 
false || true true 
false || false false 








当然 ， 我 们 也 能 连续 执行 知 干 个 逻辑 操作 。 例 如 : 
> true && true && false && true; 


-> 


-> 


false 

> false || true || false; 

true 

我 们 还 可 以 在 同一 个 表达 式 中 混合 使 用 && 和 上。 不 过 在 这 种 情况 

最 好 用 括号 来 明确 一 下 操作 有 顺序。 例如 : 

> false && false || true && true; 

true 

> false && (false || true) && true; 

false 

2.3.4.2 操作 符 优 先 级 

您 可 能 会 想 知道 ， 为 什么 上 例 中 的 第 一 个 表达 式 (false && false || 
&&true) 结果 为 true。 管 采 在 于 操作 符 优 先 级 。 这 看 上 去 有 反 像 数 

例如 : 

> 

7 

由 于 乘法 运算 的 优先 级 蜗 于 加 法 ， 所 以 该 表达 式 会 先 计算 2 * 3， 这 


束 相 当 于 我 们 输入 的 表达 式 是 : 


>1+(2*3); 
7 
RSA PE, | 的 优先 级 最 高 ， 因 此 在 没有 括号 限定 的 情况 


下 它 将 会 梓 最 先 执行 。 接 下 来 的 优先 顺序 是 &&， 最 后 才 是 |。 也 就 是 


> false && false || true && true; 
true 

与 下 面 表达 式 等 效 : 

> (false && false) || (true && true); 


true 


最 佳 实践 : 

尽量 使 用 括号 ， 而 不 是 依靠 操作 符 优 先 级 来 设 定 代 码 的 执行 顺序 ， 
这 样 我 们 的 代码 才能 有 更 好 的 可 读 性 。 

尽管 ECMAScript 标准 的 确 对 运算 符 的 优先 级 做 了 相应 的 定义 ， 而 
且 记 住所 有 运算 符 的 优先 级 也 算是 一 种 很 好 的 脑力 练习 ， 但 本 书 并 不 打 
算 提 供 这 个 优先 级 列表 。 因 为 首先 ， 就 算 您 记 住 了 这 些 顺序 ， 以 后 也 有 
可 能 会 态 记 。 其 次 ， 即 使 您 永远 不 会 忘记 ， 您 也 不 应 该 依赖 它 ， 因 为 别 
人 不 一 定 会 记得 ， 这 样 做 会 给 他 们 的 代码 阅读 与 维护 带 来 困难 。 

2.3.4.3 惰性 求 值 

如 果 在 一 个 连续 的 逻辑 操作 中 ， 操 作 结果 在 最 后 一 个 操作 完成 之 前 
就 已 经 明确 了 的 话 ， 那 么 该 操作 往往 就 不 必 再 继续 执行 了 ， 因 为 这 已 经 
不 会 对 最 终结 果 产 生 任 何 影响 。 例 如 ， 在 下 面 这 种 情况 中 : 


> true || false || true || false || true; 











true 

在 这 里 ， 所 有 的 逻辑 或 运算 符 优 先 级 都 是 相同 的 ， 只 要 其 中 任何 一 
个 操作 数 为 rue， 该 表达 式 的 结果 就 为 ”true。 因 而 当 第 一 个 操作 数 被 求 
值 之 后 ， 无 论 后 面 的 值 是 什么 ， 结 果 都 已 经 被 确定 了 。 于 是 我 们 可 以 允 
许 JavaScript 引擎 偷 个 懒 〈 好 吧 ， 这 也 是 为 了 提高 效率 ) ， 在 不 影响 最 
终结 末 的 情况 下 省 略 一 些 不 必要 的 求 值 操作 。 为 此 ， 我 们 可 以 在 控制 台 
中 做 个 实验 : 





> var b = 5; 

> true || (b = 6); 
true 

> b; 

5 


> true && (b = 6); 
6 


> b; 

6 

BRIE Zab, ETRY BR Te Be ie aN T A-AA RER 
JavaScript 引擎 在 一 个 逻辑 表达 式 中 遇 到 一 个 非 布 尔 类 型 的 操作 数 ， 那 
么 该 操作 数 的 值 就 会 成 为 该 表达 式 所 返回 的 结果 。 例 如 : 


> true || "something"; 








true 

> true && "something"; 

"something" 

> true && something && true; 

true 

Tal PF, RAT AMAR Bes, BAER BATA IA 
难以 理解 。 但 在 茶 些 时 候 这 样 做 也 是 有 用 的 。 例 如 ， 当 我 们 不 能 确定 某 
个 变量 是 否 已 经 被 定义 时 ， 就 可 以 像 下 面 这 样 ， 即 如 果 变 量 mynumber 
己 经 被 定义 了 ， 就 保留 其 原 有 值 ， 人 否则 就 将 它 初始 化 为 10。 


> var mynumber = mynumber || 10; 





> mynumber; 

10 

这 种 做 法 简单 而 优雅 ,但 是 请 注意， 这 也 不 是 绝对 安全 的 。 如 果 这 
里 的 mynumber 之 前 被 切 始 化 为 0( 或 者 是 那 6 个 falsy 值 中 的 任何 一 
个 ) ， 这 段 代码 就 不 太 可 能 如 我 们 所 愿 了 。 

> var mynumber = 0; 

> var mynumber = mynumber || 10; 

> mynumber; 

10 

2.3.4.4 比较 运算 符 

在 JavaScript 中 ， 还 有 另外 一 组 以 布尔 值 为 返回 值 类 型 的 操作 符 ， 





即 比较 操作 符 。 下 面 让 我 们 通过 表 2-4 来 了 解 一 下 它们 以 及 相关 的 示 
例 。 
表 2-4 

















操作 符 操作 说 明 代码 示例 
相等 运算 符 ; WE 
true 
四 当 两 个 操作 数 相 等 时 返回 true。 在 该 比较 操作 Bot ek 
执行 之 前 ， 两 边 的 操作 数 会 被 自动 转换 为 相同 false 
a >1ls='1'; 
KE true 
严格 相等 运算 符 : > 1 === 117 
当 且 仅 当 两 个 操作 数 的 值 和 类 型 都 相同 时 返回 ae 
true。 这 种 比较 往往 更 可 靠 ， 因 为 其 幕后 不 存 > 1 === 1 
在 任何 形式 的 类 型 转换 = 
> 
不 相等 运算 符 : false 
= 当 两 个 操作 数 不 相 等 时 返回 true (存在 类 型 转 oe oer 
false 
fh) =I l= r 
true 
严格 不 相等 运算 符 : > 1 != 1 
= HRA RUE. Rame] SSS 
值 或 类 型 不 相等 时 返回 true nie 
续 表 
操作 符 操作 说 明 代码 示例 
> 
> 当 且 仅 当 左 操作 数 大 于 右 操作 数 时 返回 true parse 
> Bai > 22 
true 
= 当 且 仅 当 左 操作 数 大 于 或 等 于 右 操作 数 时 返回 TP ee 
E true true 
S S T 
< 当 且 仅 当 左 操作 数 小 于 右 操作 数 时 返回 true sa 
true 
> 1. So 7 
Ji 当 且 仅 当 左 操作 数 小 于 或 等 于 右 操作 数 时 返回 POR 
7 true > <= 2 
true 











还 有 一 件 有 趣 的 事情 要 提醒 读者 注意 : NaN 不 等 于 任何 东西 ， 包 括 


(9 = (ae 
> NaN == NaN; 


false 
2.3.5 undefined-5 null 


当 我 们 答 试 使 用 一 个 不 存在 的 变量 时 ， 控 制 台 中 就 会 产生 以 下 错误 


> foo; 

ReferenceError: foo is not defined 

但 当 对 不 存在 的 变量 使 用 typeof 操 作 符 时 则 不 会 出 现 这 样 的 错误 ， 
而 是 会 返回 一 个 字符 串 "undefined"。 

> typeof foo; 





"undefined" 

如 果 我 们 在 声明 一 个 变量 时 没有 对 其 进行 赋值 ， 调 用 该 变量 时 并 不 
会 出 错 ， 但 typeof 操 作 符 依然 会 返回 "undefined": 

> var somevar; 

> somevar; 

> typeof somevar; 

"undefined" 

这 是 因为 当 我 们 声明 而 不 初始 化 一 个 变量 时 ，JavaScript 会 自动 使 用 
undefined 值 来 初始 化 这 个 变量 。 

> Var somevar; 

> somevar === undefined; 

true 

但 null 值 就 完全 是 男 一 回 事 了 。 它 不 能 由 JavaScript 自 动 赋值 ， 只 能 
交 由 我 们 的 代码 来 完成 。 





> var somevar = null; 

null 

> somevar; 

null 

> typeof somevar; 

"object" 

管 undefined 和 null 之 间 的 差别 微乎其微 ， 但 有 时 候 也 很 重要 。 例 
如 ， 当 我 们 对 其 分 别 执行 菜 种 算术 运算 时 ， 结 果 就 会 截然 不 同 : 


> var i= 1 + undefined; 





>j; 

NaN 

> var i= 1 + null; 

>j; 

1 

这 是 因为 null 和 undefined 在 被 转换 为 其 他 基本 类 型 时 ， 方 法 存在 一 
定 的 区 别 ， 下 面 我 们 给 出 一 些 可 能 的 转换 类 型 。 

转换 成 数字 : 

> 1 * undefined; 

NaN 

>1* null; 

0 

转换 成 布尔 值 : 


> !Iundefined， 





false 
> lnull; 
false 


转换 成 字符 串 : 


> "value: "+ null; 
"value: null" 
> "value: " + undefined; 


"value: undefined" 


2.4 基本 数据 类 型 综述 


现在 ， 让 我 们 来 快速 汇总 一 下 目前 为 止 所 讨论 过 的 内 容 。 
JavaScript 语言 中 有 五 大 基本 数据 类 型 ; 

数字 ; 

字符 串 ; 

布尔 值 ; 


undefined; 





null. 

任何 不 属于 基本 类 型 的 东西 都 属于 对 象 。 

数字 类 型 可 以 存储 的 数据 包括 : 正 负 整数 、 浮 点 数 、 十 六 进 制 数 与 
八进制 数 、 指 数 以 及 特殊 数值 NaN、Infinity、-Infinity。 

字符 串 类 型 存储 的 是 一 对 引号 之 间 的 所 有 字符 。 

布尔 类 型 的 值 只 有 两 个 : true 和 false。 

null 类 型 的 值 只 有 一 个 : null。 

undefined 类 型 的 值 只 有 一 个 : undefined. 

绝 大 部 分 值 在 转换 为 布尔 类 型 时 都 为 tue， 但 以 下 6 种 falsy 值 除外 : 








null; 


undefined; 


2.5 Wz 





现在 ， 我 们 对 JavaScript 中 的 基本 数据 类 型 已 经 有 了 一 定 的 了 解 ， 
是 时 候 将 注意 力 转向 更 有 趣 的 数据 结构 一 一 数组 了 。 

那么 完 竟 什么 是 数组 呢 ? 简 而 言 之 ， 它 就 是 一 个 用 于 存储 数据 的 列 
表 。 与 一 次 只 能 存储 一 个 数据 的 变量 不 同 ， 我 们 可 以 用 数组 来 存储 任意 
数量 的 元 素 值 。 

我 们 可 以 用 一 对 不 带 任 何 内 容 的 方 括 写 来 声明 一 个 空 数组 变量 ， 例 











如 : 

> var a= |[j: 

如 果 我 们 想 要 定义 一 个 市 三 个 元 素 的 数组 ， 则 可 以 这 样 做 : 

> var a = [1,2,3]; 

只 要 在 控制 台中 输入 相应 的 数组 名 ， 就 能 打印 出 该 数组 中 的 所 有 内 
容 : 

>a; 

[1, 2, 3] 


现在 的 问题 是 ， 我 们 应 该 如 何 访问 数组 中 的 各 个 数据 元 系 呢 ? 通 
常 ， 元 素 在 数组 中 的 索引 位 置 ( 下 标 〉 是 从 0 开始 编写 的 。 也 就 是 说 ， 
数组 首 元 系 的 索引 值 〈 或 者 说 位 置 值 ) 应 该 是 0， 第 二 个 元 素 的 索引 值 
则 是 1， 以 此 类 推 。 表 2-5 中 所 显示 的 就 是 之 前 那个 三 元 系数 组 实例 中 的 
具体 情况 。 





表 2-5 





l 
1 2 





2 3 
为 了 访问 特定 的 数组 元 素 ， 我 们 需要 用 一 对 方 括号 来 指定 元 素 的 索 
引 值 。 因 此 a[0] 所 访问 的 就 是 数组 a 的 首 元 素 ， 而 a[1] 则 代表 第 二 个 元 
素 ， 以 此 类 推 。 
> al0]; 








我 们 可 以 通过 索引 来 更 新 数组 中 的 元 素 。 例 如 在 下 面 的 代码 中 ， 我 
们 更 新 了 第 三 个 元 素 (索引 值 为 2〉 的 值 ， 并 将 更 新 后 的 数组 打印 出 
来 : 

> al2] = 'three'’; 

"three" 

Sa 

[1, 2, "three" ] 

另外 ， 我 们 也 可 以 通过 索引 一 个 之 前 不 存在 的 位 置 ， 来 为 其 添加 更 
多 的 数组 元 素 。 

> a[3] = 'four'; 

"four" 

> a 

[1, 2, "three", "four"] 


如 果 新 元 素 被 添加 的 位 置 与 原 数 组 末端 之 间 存 在 一 定 的 间隔 ， 那 么 
这 之 则 的 元 素 将 会 被 自动 设 定 为 undefined 值 。 例 如 : 


> var a = [1,2,3]; 





> al6] = 'new'; 
"new" 
>a; 


[1, 2, 3, undefined x 3, "new"] 
2.5.2 删除 元 


为 了 删除 特定 的 元 素 ， 我 们 需要 用 到 delete 操 作 符 。 然 而 ， 相 关 元 
素 补 删除 后 ， 原 数组 的 长 度 并 不 会 受到 影响 。 从 东 种 意义 上 来 说 ， 该 元 
素 被 删除 的 位 置 只 是 被 留 空 了 而 已 。 

> var a = [1, 2, 3J; 

> delete a[1]; 

true 

>a; 

[1, undefined, 3] 

> typeof a[1]; 


"undefined" 
2.5.3 数组 的 数组 


我 们 可 以 在 数组 中 存放 任何 类 型 的 值 ， 当 然 也 包括 另 一 个 数组 。 
> var a = [1, "two", false, null, undefined]; 

>a; 

[1, "two", false, null, undefined] 

> a[5] = [1,2,3]; 


[1, 2, 3] 

>a; 

[1, "two", false, null, undefined, Array[3]] 

如 果 我 们 用 鼠标 单 击 控 制 台 内 结果 里 的 Array[3]， 这 个 数组 的 值 就 
会 被 展开 。 下 面 我 们 再 来 看 另 一 个 例子 ， 这 里 定义 了 一 个 含有 两 个 数组 
的 数组 : 

> var a = [[1,2,3],[4,5,6]]; 


>a: 
[ Array[3],Array[3] | 

在 该 数组 中 ， 首 元 素 a[0] 本 喘 也 是 一 个 数组 。 

> al0]; 

[1, 2,3] 


所 以 如 果 想 要 访问 内 层 数 组 中 的 特定 元 素 ， 我 们 就 得 要 再 加 一 组 方 
括号 。 例 如 : 

> al0j[L0j]; 

1 

> a[l1][2]; 

6 

值得 注意 的 是 ， 我 们 也 可 以 通过 这 种 数组 访问 方式 来 获取 字符 串 中 
特定 位 置 上 的 字符 。 例 如 : 

> var s = ‘one’; 

> s[0]; 

"o" 

> s[1]; 

"g" 

> s[2]; 


"e" 








JSF FAB 2g AW a FB ER A HD ZS BE DE SCE CBR 
了 旧版 本 的 了 下) ， 但 直到 ECMAScript 5 才 被 官方 正式 承认 为 标准 的 一 部 
oie 

除 此 之 外 ， 数 组 的 使 用 方法 还 有 很 多 (我 们 将 会 在 第 4 章 : 对 象 中 
详细 介绍 ) ， 现 在 先 到 此 为 止 ， 请 记 住 以 下 内 容 。 

数组 是 一 种 数据 存储 形式 。 

数组 元 素 是 可 以 被 索引 的 。 

数组 中 的 元 素 索 引 是 从 0 开始 的 ， 并 且 按 照 每 个 元 素 的 位 置 依次 递 











我 们 是 通过 方 括号 中 的 索引 值 来 访问 数组 元 素 的 。 
数组 能 存储 任何 类 型 的 数据 ， 包 括 另 一 个 数组 。 


2.6 条 件 与 循环 





条 件 表达 式 是 一 种 简单 而 强大 的 控制 形式 ， 它 能 够 帮助 我 们 控制 一 
小 段 代码 的 执行 走向 。 而 循环 则 是 一 种 可 以 让 我 们 重复 执行 某 段 代码 的 
操作 。 接 下 来 ， 我 们 将 会 学 习 以 下 内 容 。 

让 条 件 表 达 式 。 

switch 语 句 。 

while、do-while、for， 以 及 for-in 循环 。 

下 一 小 节 中 的 例子 需要 我 们 在 Firebug 控 制 台 中 打开 多 行 输入 功能 。 
在 WebKit 控 制 台中 ， 也 可 以 通过 Shift +Enter 来 输入 新 行 。 


2.6.1 if 条 件 表达 式 


让 我 们 先 来 看 一 个 简单 的 和 ff 条件 表达 式 : 


var result =", a=3; 
if (a> 2){ 
result = 'a is greater than 2'; 
} 
如 您 所 见 ， 该 表达 式 通常 主要 由 以 下 几 个 部 分 组 成 : 
if 语句 。 


括 写 中 的 条 件 部 分 一 一 判断 “a 是 否 大 于 2”。 
被 包含 在 们 内 的 代码 块 ， 这 是 当 if 条 件 满足 时 该 程序 所 要 执行 的 部 


其 中 ， 条 件 部 分 〈 即 括号 内 的 部 分 ) 通常 由 某 些 返 回 布尔 值 的 操作 
组 成 ， 主 要 有 以 下 几 种 形式 : 


逻辑 类 操作 ， 包 括 !、&&、|| 等 。 
比较 类 操作 ， 和 包括 ===、!=、> 等 。 

一 个 可 以 转换 为 布尔 类 型 的 值 或 变量 。 
以 上 几 种 形式 的 组 合 。 


2.6.2 elseif] 


除 此 之 外 ， if 表达 式 中 还 可 以 有 一 个 可 选项 ， 即 else。 如 果 条 件 部 
分 的 表达 式 返回 false 的 话 ， 我 们 也 可 以 执行 后 面 else 子 句 中 的 代码 块 。 
例如 : 





if (a> 2){ 
result = 'a is greater than 2’; 
} else { 
result = 'a is NOT greater than 2'; 


而 且 ， 我 们 还 可 以 在 让 和 else 之 间 插 入 任意 个 else if FA). Pith: 
if (a>2||a<-2){ 
result = 'a is not between -2 and 2’; 
} else if (a === 0 && b === 0) { 
result = 'both a and b are zeros’; 
} else if (a === b) { 
result = 'a and b are equal’; 
} else { 
result = 'I give up’; 
AIh RANEE PAE = BT ERS AA BR SBT AR PG AY 
if (a === 1) { 


if b === 2) { 


result = 'a is 1 and b is 2'; 


} else { 
result = 'a is 1 but b is definitery not 2’; 
} 
} else { 
result = 'a is not 1, no idea about b'; 


} 
2.6.3 代码 块 


在 前 几 个 例子 中 ， 我 们 实际 上 已 经 使 用 了 代码 块 。 首 先 ， 我 们 需要 
先 了 解 一 下 什么 是 代码 块 ， 因 为 这 东西 在 条 件 表达 式 和 循环 体 中 是 随处 
可 见 的 。 
所 谓 的 代码 块 ， 实 际 上 指 的 是 被 包括 在 大 括号 中 的 、 由 0 个 或 多 个 
表达 式 组 成 的 一 段 代 码 。 
{ 
vara=1; 
var b = 3; 
} 
FE ABE SER BI BY AEA RA PRR: 
{ 


最 佳 实践 : 

尽量 使 用 分 号 来 作为 每 一 行 的 结束 。 尽 管 这 在 语法 上 是 可 选 的 ， 但 
对 于 开发 来 说 是 一 个 很 好 的 习惯 。 为 了 让 代码 获得 最 佳 的 可 读 性 ， 我 们 
在 代码 块 中 的 表达 式 最 好 是 一 行 一 个 ， 并 用 分 号 彼此 陋 开 。 

尽量 对 代码 块 中 的 所 有 代码 使 用 缩 进 格式 。 有 些 人 会 用 Ta b 来 做 
缩 进 ， 而 有 些 则 会 使 用 四 个 或 两 个 空格 。 这 都 无 关 紧 要 ， 只 要 保持 前 后 
一 致 就 行 。 在 上 面 那 个 例子 中 ， 我 们 在 最 外 层 用 了 两 个 空格 的 缩 进 ， 在 
首 层 供 套 中 用 了 4 个 空格 ， 而 第 二 层 则 是 6 个 空格 。 

尽量 使 用 大 括号 。 当 代码 块 中 只 有 一 个 表达 式 时 ， 大 括号 实际 上 是 
可 选 的 。 但 为 了 增加 代码 的 可 读 性 和 可 维护 性 ， 我 们 最 好 还 是 养 成 加 大 
括号 的 习惯 ， 即 使 这 不 是 必需 的 。 


2.6.4 检查 变量 是 否 存在 




















下 面 让 我 们 来 实际 使 用 一 下 条 件 语句 。if 表达 式 在 检查 一 个 变量 是 
侍 存 在 时 往往 非常 有 用 。 其 中 ， 最 懒 的 方法 就 是 其 条 件 部 分 中 直接 使 用 
变量 ， 例 如 if(somevar){..….}。 但 这 样 做 并 不 一 定 是 最 合适 的 。 我 们 可 以 
来 测试 一 下 。 在 下 面 这 段 代码 中 ， 我 们 将 会 检查 程序 中 是 否 存在 一 个 叫 
做 somevar 的 变量 ， 如 果 存 在 ， 就 将 变量 result 设 置 为 yes。 


> var result = "; 











> if (somevar){ 


result = 'yes'; 


} 


ReferenceError: somevar is not defined 


> result; 


WT 


这 段 代 码 显 然 是 起 作用 了 ， 因 为 最 终 的 结果 肯定 不 会 是 yes. (AA 
先 ， 这 段 代 码 会 产生 一 个 警告 信息 : “somevar is not defined”， 作 为 一 个 
JavaScript 高 手 ， 您 肯定 不 会 希望 自己 的 代码 多 此 一 举 。 其 次 ， 束 算 
if(somevar) 返 回 的 是 false， 也 并 不 意味 着 somevar 就 一定 没有 定义 ， 它 也 
可 以 是 任何 一 种 被 初始 化 为 falsy 值 〈 如 false 或 0) 的 已 声明 变量 。 

所 以 在 检查 变量 是 否 存 在 时 ， 更 好 的 选择 是 使 用 typeof。 


Tit, 
3 














> var result = 


> if (typeof somevar !== "undefined"){ 
result = 'yes'; 

} 

> result; 


WT 


在 这 种 情况 下 ，typeof 返 回 的 是 一 个 字符 串 ， 这 样 就 可 以 与 字符 
串 "undefined" 进 行 直接 比 对 。 但 需要 注意 的 是 ， 如 果 这 里 的 somevar 是 一 
个 已 经 声明 但 尚未 赋值 的 变量 ， 结 果 也 是 相同 的 。 也 就 是 说 ， 我 们 实际 
上 是 在 用 typeof 测 试 一 个 变量 是 否 已 经 被 初始 化 (或 者 说 测试 变量 值 是 
否 为 undefined)〉。 


> Var somevar; 








> if (typeof somevar !== "undefined"){ 
result = 'yes'; 
} 


> result; 


Wt 


> somevar = undefined; 

> if (typeof somevar !== "undefined"){ 
result = 'yes'; 

} 


> result; 


而 当 一 个 已 被 定义 的 变量 被 赋值 为 非 undefined 的 任何 值 后 ， 该 变量 
的 typeof 结 果 就 不 再 是 undefined 了 。 


> somevar = 123; 








> if (typeof somevar !== "undefined"){ 
result = 'yes'; } 


> result; 


2.6.4.1 蔡 代表 达 式 

如 采 我 们 所 面 对 的 条 件 表 达 式 非常 简单 ， 就 可 以 考虑 用 其 他 形式 来 
蔡 代 证 表达 式 。 例 如 下 面 这 段 代 码 : 

vara=1; 


var result = "; 


if (a === 1) { 
result = "a is one"; 
} else { 
result = "a is not one"; 
} 
我 们 完全 可 以 将 其 简化 为 : 
>vara=1; 
> var result = (a === 1) ? "ais one" : "a is not one"; 


但 需要 提醒 的 是 ， 这 种 语法 通常 只 用 于 一 些 非 第 简单 的 条 件 逻 辑 ， 


干 万 不 要 滥用 。 因 为 这 样 做 很 容易 使 我 们 的 代码 变 得 难以 理解 。 以 下 是 
一 个 洲 用 的 例子 。 

假设 我 们 需要 判断 一 个 变量 是 否 在 茶 个 区 间 《 例 如 从 50 到 100 ) 
内 。 如 变量 不 在 这 个 区 间 ， 程 序 就 会 将 最 接近 当前 值 的 那个 区 间 边 界 赋 
值 给 变量 。 

> var a = 123; 

>a=a> 100?100:a<50?50:a; 

>a; 

100 

由 于 这 里 执行 了 两 次 ?操作 ， 这 会 使 我 们 无 法 一 眼 判断 表达 式 的 运 
行 顺 序 。 为 了 让 表达 式 显 得 更 清晰 一 些 ， 我 们 最 好 还 是 在 其 中 加 入 一 些 
括号 。 

> var a= 123; 

>a = (a > 100? 100 : a < 50)? 50: a; 

>a; 

50 

> var a = 123; 

>a=a>100?100:(a<50?50: a); 

>a; 

100 

这 里 的 ?: 操 作 符 叫做 三 元 运算 从， 因为 它 需 要 三 个 操作 数 。 

2.6.4.2 switch 语句 

当 我 们 发 现 自己 在 if 表达 式 中 使 用 了 太 多 的 else if FEJ, WMZ 
要 考虑 用 switch 语 句 来 蔡 代 if 了 。 


var a = 'f'; 








var result = "; 


switch (a) { 


case 1: 
result = 'Number 1’; 
break; 
case '1': 
result = 'String 1’; 
break; 
default: 
result = 'I don\'t know'; 
break; 
} 
显然 ， 这 段 代 码 的 执行 结果 为 "String 1"。 现 在 ， 让 我 们 来 看 看 
switch 表达 式 主要 由 哪 几 部 分 组 成 。 








switch 子 句 。 
括 写 中 的 表达 式 。 它 通常 会 是 一 个 变量 ,但 也 可 以 是 其 他 任何 能 提 
供 返 回 值 的 东西 。 


包含 在 大 括号 中 的 case 序列 块 。 

每 个 case 语 句 后 面 有 一 个 表达 式 ， 该 表达 式 的 结果 将 会 与 switch 语 
句 的 表达 式 进 行 比 对 。 如 果 比 对 的 结果 为 tue， 则 case 语 句 中 冒号 之 后 
的 代码 将 会 被 执行 。 

break 语 句 是 可 选 的 ， 它 实际 上 是 case 块 的 结束 符 ， 即 当代 码 执行 到 
break 语 句 时 ， 整 个 switch 语 句 束 执行 完成 了 ， 盏 则 就 继续 执行 下 一 个 
case 块 。 

使 用 关键 字 default 标记 的 默认 条 件 代 码 块 。 如 果 其 他 case 条 件 都 不 
为 true 的 话 ，default 条 件 就 会 被 执行 。 

换 句 话说 ， 整 个 switch 语 句 的 执行 应 该 可 以 分 为 以 下 几 个 步 又 。 

1. 对 switch 语 句 后 面 的 括号 部 分 进行 求 值 ， 并 记录 结 

2. 移动 到 第 一 个 case 和 条件， 将 它 的 值 与 步骤 1 的 结果 进行 比 对 。 





3. 如 果 步 又 2 中 的 比 对 结果 为 tue， 则 执行 该 case 块 中 的 代码 。 

4. 在 相关 case 块 执行 完成 之 后 ， 如 有 果 遇 到 break 语 句 就 直接 退出 
Switch 。 

5. 如 没有 遇 到 break 或 步骤 2 中 的 比 对 结果 为 false， 就 继续 下 一 个 
case 块 。 

6. 重复 步 又 2 到 5 中 的 操作 。 

7. 如 果 依 然 还 没有 结束 〈 也 就 是 始终 未 能 按照 步骤 4 中 的 方式 退 
出 ) ， 就 执行 default 语 名 后 面 的 代码 块 。 

最 佳 实践 

将 case 后 面 的 代码 相对 于 case 缩 进 。 当 然 您 也 可 以 将 case 相 对 于 
switch 缩 进 ， 但 这 样 其 实 不 会 增加 代码 的 可 读 性 。 

AN BETS J break. 

有 了 时候 ， 我 们 会 希望 故意 省 略 一 些 break 语句 ， 当 然 ， 这 种 叫做 
贯 窥 〈fall-through〉 的 做 法 在 实际 应 用 中 并 不 常见， 因为 它 通 常会 被 误 
认为 是 人 为 的 遗漏 。 故 而 使 用 时 往往 需要 在 文档 中 加 以 说 明 。 但 从 另 一 
方面 来 说 ， 如 果 我 们 真 的 有 意 让 两 个 相 令 的 case 语句 共享 同一 段 代 码 
的 话 ， 这 样 做 并 没有 什么 不 妥 。 只 不 过 ， 这 不 能 改变 相关 的 规则 ， 即 如 
果 执 行 代 人 码 是 写 在 case 语 句 之 后 的 话 ， 它 依然 应 该 以 break 结 尾 。 男 外 在 
缩 进 方 面 ，break 是 选择 与 case 对 齐 还 是 与 相关 的 代码 块 对 齐 ， 完 全 取决 
于 个 人 喜好 ， 只 要 保持 风格 的 一 致 性 即 可 。 

尽量 使 用 default 语 句 。 因 为 这 可 以 使 我 们 在 switch 找 不 到 任何 匹配 
的 情况 下 ， 也 依然 能 返回 一 些 有 意义 的 结果 。 


2.6.5 循环 


























通过 ielse 和 switch 语 句 ， 我 们 可 以 在 代码 中 采取 不 同 的 执行 路 径 。 
好 比 我 们 处 于 十 字 路 口 时 ， 可 以 根据 某 个 具体 的 条 件 来 选择 自己 的 走 








回 。 然 而 ， 循 环 就 完全 是 为 一 回 事 了 ， 我 们 可 以 利用 它 使 代码 在 返回 主 
路 径 之 前 先 去 执行 某 些 重复 操作 。 至 于 重复 的 次 数 ， 则 完全 取 诀 于 我 们 
设 定 在 每 次 达 代 之 前 (或 之 后 ) 的 条 件 值 。 

比如 说 ， 我 们 的 程序 通常 都 是 在 A 点 到 B 点 之 间 运 行 ， 如 果 我 们 在 
这 之 间 设 置 了 一 个 条 件 C， 而 这 个 条 件 的 值 将 会 决定 我 们 是 否 要 进入 循 
环 L。 那 么 一 旦 进入 了 循环 ， 我 们 束 必 须 在 每 次 过 代 完成 之 后 对 该 条 件 
进行 重新 求 值 ， 以 判断 是 否 要 执行 下 一 次 达 代 。 总 之 ， 我 们 最 终 还 是 会 
回 到 通 往 B 点 的 路 径 上 来 的 。 
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当 某 循环 的 条 件 永 为 true 时 ， 它 就 成 了 一 个 无 限 循环 。 这 意味 痢 代 
人 码 将 会 被 “永远 ” 困 在 循环 中 。 这 无 疑 是 一 个 逻辑 上 的 错误 ， 我 们 必须 对 
此 加 以 防范 。 

在 JavaScript 中 ， 循 环 主要 有 以 下 四 种 类 型 ; 

while 循 环 ; 

do-while 循环 ; 

for 循环 

for-in 循 环 。 

2.6.5.1 while 循环 

while 循 环 是 最 为 简单 的 一 种 循环 ， 它 们 通常 是 这 样 的 : 


var i= 0; 


while (i < 10) { 

i++; 

} 

while 语 句 主要 分 为 两 个 部 分 : 小 括号 中 的 条 件 和 大 括号 中 的 代码 
块 。 当 且 仅 当 条 件 值 为 true 时 ， 代 码 块 才 会 被 反复 执行 。 

2.6.5.2 do-while 循环 

do-while 循 环 实际 上 是 while 循 环 的 一 种 轻微 的 变种 。 示 例如 下 : 

var i = 0; 

do { 

i++; 

} while (i < 10); 

在 这 里 ，do 语 名 后面 先 出 现 的 是 代码 块 ， 然 后 才 是 条 件 。 条 件 出 现 
在 代码 块 之 后 ， 这 意味 着 代码 块 无 论 如 何 都 会 被 执行 一 次 ， 然 后 再 去 对 
条 件 部 分 进行 求 值 。 

如 果 我 们 将 上 面 两 个 示例 中 的 i 初始 化 为 11 而 不 是 0 的 话 ， 第 一 个 例 
F (while 循 环 〉 中 ， 代 码 块 将 不 会 执行 ， i 最终 的 值 仍然 是 11， 而 第 二 
个 例子 (do-while 循 环 〉 中 的 代码 块 将 会 被 执行 一 次 ， i 的 值 也 会 变 为 
12。 

2.6.5.3 for 循环 

for 是 使 用 得 最 为 广泛 的 循环 类 型 ， 也 是 我 们 最 应 该 掌握 的 内 容 。 实 
际 上 ， 这 也 只 需要 掌握 一 点 点 语法 知识 。 











在 条 件 C 和 代码 块 L 的 基础 上 ， 我 们 还 需要 增加 以 下 两 个 部 分 的 内 
容 。 

初始 化 部 分 一 一 在 进入 循环 之 前 所 要 执行 的 代码 ( 即 图 中 0 所 标识 
的 内 容 ) 。 

目 增 部 分 
AA) 。 

最 常用 的 for 循 环 模式 主要 包括 以 下 内 容 。 

在 初始 化 部 分 中 ， 我 们 会 定义 一 个 循环 变量 (通常 命名 为 1 ) ， 例 
如 vari= 0:。 

在 条 件 部 分 中 ， 我 们 会 将 i 与 循环 边界 值 进行 比 对 。 例 如 i < 100. 

在 目 增 部 分 中 ， 我 们 会 将 循环 变量 ij 目 增 1， 如 i++。 

下 面 来 看 一 个 具体 示例 : 

var punishment = "; 

for (var i = 0; i < 100; i++) { 

punishment += 'T will never do this again, '; 

} 

实际 上 ， 这 三 个 部 分 〈 初 始 化 、 循 环 条 件 、 目 增 操作 ) 都 可 以 写成 
用 逐 号 分 割 的 多 重 表达 式 。 例 如 ， 我 们 可 以 重 写 一 忆 上 面 的 例子 ， 在 其 
初始 化 部 分 中 增加 punishment 变 量 的 定义 。 


for (var i = 0, punishment = "; i < 100; i++) { 


每 次 迭代 完成 后 所 要 执行 的 代码 《〈 即 图 中 ++ 所 标识 的 





punishment += 'T will never do this again, '; 
} 
那么 ， 我 们 能 不 能 把 循环 体 中 的 内 容 移 到 目 增 部 分 中 去 呢 ? 当然 可 
尤其 当 其 中 只 有 一 行内 容 时 。 只 不 过 这 样 的 循环 看 上 去 有 点 令 人 炮 
因为 它 没有 循环 体 了 。 
for ( 

var i = 0, punishment = "; 

i < 100; 


i++, punishment += 'I will never do this again, '){ 


以 





-> 


S 


// nothing here 
} 
事实 上 ， 这 三 部 分 也 都 是 可 选 的 ， 上 面 的 例子 也 完全 可 以 写成 下 面 
这 样 : 
var i = 0, punishment = "; 
for (53) { 
punishment += 'T will never do this again, '; 
if (++i == 100) { 
break; 
} 
} 
尽管 代码 重 写 之 后 的 工作 方式 与 原来 相同 ， 但 它 显 得 更 长 ， 可 读 性 
也 更 差 了 。 我 们 也 完全 可 以 用 while 循 环 来 取代 它 。 但 for 循 环 可 以 使 代 
码 更 紧凑 、 更 严谨 。 它 的 三 个 部 分 〈 初 始 化 、 循 环 条 件 、 自 增 操作 ) 泾 
渭 分 明 ， 语 法 也 更 为 纯粹 。 这 些 都 有 利于 我 们 理 清 程序 的 逻辑 ， 从 而 避 
免 类 似 于 无 限 循 环 这 样 的 麻烦 。 
男 外 ，for 循 环 还 可 以 彼此 藤 套 。 下 面 ， 我 们 来 看 一 个 藤 套 循环 的 具 
体 示例 。 假 设 该 例 要 打印 一 个 10 行 10 列 的 星 号 字符 串 ， 那 么 我 们 就 可 以 











用 来 表示 行 数 ，j 则 表示 列 数 ， 以 构成 一 个 “图 形 ”: 

var res = AD ; 
for(var i = 0; i < 10; i++) { 

for(var j = 0; j < 10; j++) { 

res += '%* '; 

} 

res+= '\n'; 
} 
BA, ee aT 
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it 

Fb, RANEE CAA RR EA A BS Fi Hy — 7 SER A, 
代码 如 下 : 

var res = '\n’', i, j; 

for(i = 1; i <= 7; i++) { 


for(j = 1; j <= 15; j++) { 


res += (1 *j)%8?'':'; 


} 
rest+= ‘\n'; 
} 
其 输出 如 下 。 
" 
% 
水 + + 
+ 


it 
2.6.5.4 for-in 循环 


forin 循 环 往往 被 用 来 过 有 历 茶 个 数组 〈 或 对 象 ， 这 一 点 我 们 以 后 再 
讨论 ) 中 的 元 率 。 这 似乎 也 是 它 唯一 的 用 处 ， 该 循环 不 能 用 来 答 代 for 或 
while 循 环 ， 执 行 茶 些 一 般 性 的 重复 操作 。 下 面 ， 我 们 来 看 一 个 for-in 通 
历数 组 元 素 的 示例 。 当 然 ， 例 子 仅 供 参考 。 毕 竞 对 于 forin 循 环 来 说 ， 
它 最 适用 的 场合 依然 是 对 象 ， 以 及 用 于 第 规 for 循 环 的 数组 。 


在 下 面 的 示例 中 ， 我 们 将 遍历 数组 中 的 所 有 元 素 ， 并 打印 出 当前 所 
在 的 索引 位 置 和 元 素 值 。 

//example for information only 

// for-in loops are used for objects 

//regular for is better suited for arrays 

var a = [ 'a', 'b', 'c’, 'x', 'y’, '2']; 

var result = '\n'; 

for (var i in a) { 

result += 'index: ' + i + ', value: ' + ali] + '\n'; 

} 

结果 如 下 : 

index: 0, value: a 

index: 1, value: b 

index: 2, value: c 

index: 3, value: 


index: 4, value: 


N <I x 


index: 5, value: 


W 


2.7 注释 


现在 ， 我 们 来 看 本 章 最 后 一 个 内 容 : 注释 。 通 过 注释 这 种 形式 ， 我 
们 可 以 将 自己 的 一 些 想法 放 在 JavaScript 代 码 中 。 由 于 注释 中 的 内 容 会 被 
JavaScript 引 擎 自动 忽略 掉 ， 因 此 它们 不 会 对 程序 产生 任何 影响 。 而 当 您 
几 个 月 后 重新 考虑 这 段 代 码 ， 或 将 其 转让 给 其 他 人 维护 时 ， 这 些 注释 就 
会 显得 非常 重要 。 
注释 的 形式 主要 有 以 下 两 种 。 
单行 注释 一 一 以 /开头 并 直至 该 行 结 
多 行 注 释 一 一 以 开 涉 ， 并 以 */ 结 尾 ， 其 中 可 以 包括 一 行 或 多 行内 
。 但 要 记 住 ， 注 释 首尾 符 之 间 的 任何 代码 都 将 会 被 忽略 。 
具体 示例 如 下 : 


// beginning of line 








var a = 1; // anywhere on the line 

/* multi-line comment on a single line */ 

/水 

comment that spans several lines 

=f 

甚至 ， 有 些 实用 工具 〈 例 如 JSDoc 及 YUIDoc) 可 以 从 我 们 的 代码 中 
提取 相关 的 注释 ， 并 据 此 生成 有 意义 的 项 目 文档 。 








2.8 本 章 小 结 


在 这 一 章 中 ， 我 们 学 习 了 编写 一 个 JavaScript 程序 所 需要 的 基本 组 
件 。 现 在 ， 您 应 该 已 经 掌握 了 以 下 几 种 基本 数据 类 型 : 

FAT 

布尔 值 


undefined 





null 

您 也 已 经 7 了 解 了 一 些 基 本 的 操作 符 : 

算术 运算 符 ; +、-、*、/、%; 

HIX GR) 运算 符 : ++、--; 

赋值 运算 符 ，=、+=、-=、*=、/=、%=; 

特殊 操作 符 : typeof. delete; 

逻辑 运算 符 : &&. ||. |; 

TOA nae = = | =. Sy San 

三 元 运算 符 : ?。 

另外 ， 我 们 还 学 习 了 如 何 使 用 数组 来 存储 和 访问 数据 。 最 后 ， 我 们 
还 为 您 介绍 了 几 种 不 同 的 控制 程序 流程 的 方法 一 一 条 件 (if-else 和 
switch 语句 ) 和 循环 (while、do-while、for、for-in 语 句 ) 。 

本 章 的 信息 量 确实 不 小 ， 因 此 我 们 建议 您 通过 下 面 的 练习 巩固 一 
下 。 在 继续 深入 下 一 章 的 学 习 之 前 ， 我 们 需要 给 自己 一 些 鼓 励 。 
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2.9 练习 题 


1. 如 果 我 们 在 控制 台中 执行 下 列 语句 ， 结 果 分 别 是 什么 ? 为 什 


> var a; typeof a; 

> vars = "1s'; s++; 

> !I"false"; 

> !ltundefined; 

> typeof -Infinity; 

> 10% "0"; 

> undefined == null; 
> false === ""; 


> typeof "2E+2"; 


>a = 3et+3; a++; 

2. 执行 下 面 的 语句 后 ，v 的 值 会 是 什么 ? 
> var v = v || 10; 

如 果 将 v 分 别 设置 为 100、0、null， 结 果 又 将 是 什么 ? 

3. 编写 一 个 打印 乘法 口诀 表 的 脚本 程序 。 提 示 : 使 用 藤 套 循环 来 
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对 于 学 习 任 何 程序 设计 语言 来 说 ， 和 掌握 函数 都 是 非常 重要 的 。 对 于 
JavaScript 更 是 如 此 ， 因 为 该 语言 中 的 很 多 功能 、 其 灵活 性 以 及 表达 能 
都 来 自 函 数 。 例 如 ， 绝 大 部 分 语言 都 有 自己 专门 的 面向 对 象 的 语法 ， 而 
JavaScript 没 有 : 它 是 通过 函数 来 实现 面 同 对 象 特性 的 。 在 这 一 章 中 ， 我 
们 首先 要 掌握 如 下 内 容 : 

如 何 定义 和 使 用 函数 ; 

如 何 回 函数 传递 参数 ; 

了 解 我 们 可 以 “免费 ”调用 哪些 预定 义 函 数 ; 

了 解 JavaScript 中 的 变量 作用 域 ; 

理解 “函数 也 是 数据 ”的 概念 ， 并 将 函数 视 为 一 种 特殊 的 数据 类 型 。 

理解 了 上 述 内 容 之 后 ， 我 们 束 可 以 继续 深入 本 章 的 第 二 部 分 。 在 这 
一 部 分 中 ， 您 将 会 看 到 一 些 有 趣 的 函数 应 用 : 

匿名 函数 的 调用 ; 

回调 函数 ; 

即时 《〈 自 调 ) 函数 ; 

AL HR ERA CFE PRIA AY FB RE SCAN PBI IO) ; 

以 函数 为 返回 值 的 函数 ; 

能 重 定义 自身 的 函数 ; 

闭 包 。 

















3.1 tA 


所 谓 函 数 ， 本 质 上 是 一 种 代码 的 分 组 形式 。 我 们 可 以 通过 这 种 形式 
赋予 某 组 代码 一 个 名 字 ， 以 便于 之 后 的 调用 。 下 面 ， 我 们 来 示范 一 下 函 
数 的 声明 : 

function sum(a, b) { 

var c =a + b; 
return C; 

} 

一 般 来 说 ， 函 数 声 明 通 弟 由 以 下 几 部 分 组 成 。 

关键 词 function 。 

函数 名 称 ， 即 这 里 的 sum。 

冰 数 所 需 的 参数 ， 即 这 里 的 a、b。 一 个 函数 通常 都 具有 0 个 或 多 个 
参数 。 参 数 之 间 用 逗号 分 隔 。 
函数 所 要 执行 的 代码 块 ， 我 们 称 之 为 函数 体 。 

retum FEJ KZOE ARS AKI, WREN RAA Se SI 

回 值 ， 我 们 就 会 默认 它 的 返回 值 为 undefined。 
需要 注意 的 是 ， 一 个 函数 只 能 有 一 个 返回 值 ， 如 采 我 们 需要 同时 返 
回 多 个 值 ， 可 以 考虑 将 其 放 进 一 个 数组 里 ， 以 数组 元 素 的 形式 返回 。 

这 里 的 整个 语法 过 程 叫做 函数 声明 。 在 JavaScript F, KAHR 

是 创建 函数 的 方法 之 一 ， 之 后 我 们 会 介绍 其 他 方法 。 








如 果 我 们 需要 使 用 一 个 函数 ， 就 必须 要 去 调用 它 。 调 用 的 方式 很 简 


单 ， 只 需 在 函数 名 后 面 加 一 对 用 以 传递 参数 的 括号 即 可 。 另 外 ， 对 
于 “调用 (to call) ”这 种 操作 ， 我 们 有 时 也 可 以 将 其 称 之 为 “请 求 Cto 
invoke) ” 某 个 函数 。 

现在 ， 让 我 们 来 调用 一 下 sum() 函 数 。 先 将 两 个 参数 传递 给 该 函 
数 ， 然 后 再 将 函数 的 返回 值 赋值 给 变量 result。 具 体 如 下 : 


> var result = sum(1, 2); 





> result; 
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3.1.2 参数 


在 定义 一 个 函数 的 同时 ， 我 们 往往 会 设置 该 函数 所 需 的 调用 参数 。 
当然 ， 您 也 可 以 不 给 它 设 定 参 数 ， 但 如 果 您 设 定 了 ， 而 又 在 调用 时 筷 了 
传递 相关 的 参数 值 ，JavaScript 引 敬 束 会 自动 将 其 设 定 为 ”undefined。 例 
如 在 下 面 这 个 调用 中 ， 函 数 返回 的 是 NaN， 因 为 这 里 试图 将 1 与 
undefined 相 加 。 

> sum(1); 

NaN 

从 技术 角度 来 说 ， 参 数 又 可 分 为 形 参 (形式 参数 ) 与 实 参 (实际 参 
ZO 两 种 ， 但 我 们 往往 并 不 需要 严格 区 分 它们 。 形 参 是 指定 义 函 数 时 所 
用 的 那些 参数 ， 而 实 参 则 指 的 是 在 调用 函数 时 所 传递 的 那些 参数 。 考 虑 
以 下 例子 。 

> function sum(a, b){ 

return a + b; 
} 
>sum(1, 2); 
在 这 里 ，a 和 b 是 形 参 ， 而 1 和 2 是 实 参 。 


对 于 那些 已 经 传递 进来 的 参数 ，JavaScript 是 来 者 不 拒 的 。 但 是 ， 即 
便 我 们 加 sum0 传 递 再 多 的 参数 ， 多 余 的 那 部 分 也 只 会 被 默 默 地 忽略 
fi 

>sum(1, 2, 3, 4, 5); 

3 

实际 上 ， 我 们 还 可 以 创建 一 些 在 参数 数量 方面 更 为 灵活 的 函数 。 这 
得 益 于 函数 内 部 的 arguments 变量 ， 访 变量 为 内 建 变 量 ， 每 个 函数 中 都 
能 调用 。 它 能 返回 函数 所 接收 的 所 有 参数 。 例 如 : 


> function args() { 











return arguments; 
} 
> args(); 
> args( 1, 2, 3, 4, true, 'ninja’); 
[1, 2, 3, 4, true, "ninja"] 
通过 变量 arguments， 我 们 可 以 进一步 完善 sum0 函 数 的 功能 ， 使 之 
能 对 任意 数量 的 参数 执行 求 和 运算 。 


function sumOnSteroids() { 





Var i, 
res = 0, 
number_of_params = arguments.length; 
for (i = 0; i < number_of_params; i++) { 
res += arguments[i]; 
} 
return res; 
} 
下 面 ， 我 们 用 不 同 数量 的 参数 (包括 没有 参数 ) 来 测试 该 函数 ， 看 


看 它 是 否 能 按照 我 们 预计 的 方式 工作 : 

> sumOnSteroids(1, 1, 1); 

3 

> sumOnSteroids(1, 2, 3, 4); 

10 

> sumOnSteroids(1, 2, 3, 4, 4, 3, 2, 1); 

20 

> sumOnSteroids(5); 

5 

> sumOnSteroids(); 

0 

其 中 ， 表 达 式 arguments.lengh 返 回 的 是 函数 被 调用 时 所 接收 的 参数 
数量 。 如 果 您 对 这 段 代 码 中 的 某 些 语法 不 太 熟悉 ， 也 不 必 太 担心 ， 我 们 
将 会 在 下 一 章 中 详细 讨论 它们 。 到 那 时 ， 您 会 发 现 arguments 实 际 上 不 是 
一 个 数组 〈 虽 然 它 有 很 多 数组 的 特性 ) ， 而 是 一 个 类 似 数组 的 对 象 。 


3.2 FUE X PK Ž 


JavaScript 引 苟 中 有 一 组 可 供 随时 调用 的 内 建 函 数 。 下 和 面 ， 让 我 们 来 
了 解 一 下 这 些 函 数 。 在 这 一 过 程 中 ， 我 们 会 通过 一 系列 具体 的 函数 实 
m 来 帮助 您 掌握 这 些 函 数 的 参数 和 返回 值 ， 以 便 最 终 实 现 熟练 应 用 。 

这 些 内 建 函 数 包括 : 
parseInt(); 





parseFloat(); 
isNaN(); 
isFinite(); 
encodeURI(); 
decodeURI(); 
encodeURIComponent(); 
decodeURIComponent(); 
eval(). 
fm PAA 
一 般 来 说 ， 当 我 们 调用 一 个 函数 时 ， 程 序 是 不 需要 知道 该 函数 的 内 
部 工作 细节 的 。 我 们 可 以 将 其 看 做 一 个 黑 盒 子 ， 您 只 需要 给 它 一 些 值 
(作为 输入 参数 ) ， 就 能 获取 它 输 出 的 返回 结果 。 这 种 思维 适用 于 任何 
函数 一 一 既 包 括 JavaScript 中 的 内 建 函 数 ， 也 包括 由 任何 个 人 或 集体 所 创 
建 的 函数 。 





3.2.1 parseInt() 
parseInt() 会 试图 将 其 收 到 的 任何 输入 值 ( 通 常 是 字符 串 〉 转换 成 整 


数 类 型 输出 。 如 果 转 换 失 败 就 返回 NaN。 

> parselInt('123'); 

123 

> parseInt(‘abc123'); 

NaN 

> parseInt(‘labc23'); 

1 

> parseInt('123abc'); 

123 

除 此 之 外 ， 该 函数 还 有 个 可 选 的 第 二 参数 : 基数 (radix) ， 它 负责 
设 定 函 数 所 期 望 的 数字 类 型 一 一 十 进 制 、 十 六 进 制 、 二 进 制 等 。 在 下 面 
的 例子 中 ， 如 果 试 图 以 十 进 制 输出 字符 串 "FF"， 结 果 就 会 为 NaN。 而 改 
为 十 六 进 制 ， 我 们 束 会 得 到 255。 

> parselnt('FF', 10); 

NaN 

> parselnt('FF', 16); 

255 

再 来 看 一 个 将 字符 串 转 换 为 十 进 制 和 八进制 的 例子 : 

> parseInt('0377', 10); 

377 

> parseInt('0377', 8); 

255 
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为 十 进 制 ， 但 有 两 种 情况 例外 。 

如 果 首 参数 字符 串 是 0x 开头 ， 第 二 参数 就 会 被 默认 指定 为 16 (也 
就 是 默认 其 为 十 六 进 制 数 ) 。 

如 果 首 参数 以 0” 开头， 第 二 参数 就 会 被 默认 指定 为 8 〈 也 就 是 默认 


其 为 八进制 数 ) 。 

> parselnt('377'); 

377 

> parseInt('0377'); 

255 

> parselInt('0x377'); 

887 

当然 ， 明 确 指定 radix 值 总 是 最 安全 的 。 如 果 您 省 略 了 它 ， 尽 管 
99% 的 情况 下 依然 能 够 正常 运作 (毕竟 最 第 用 的 还 是 十 进 制 数 ) ， 但 我 
们 偶尔 还 是 会 在 调试 时 发 现 一 些小 问题 。 例 如 ， 当 我 们 从 日 历 中 读 取 日 
期 时 ， 对 于 08 这 样 的 数据 ， 如 果 不 设 定 radix 参 数 可 能 就 会 导致 意 想 不 到 
的 结果 。 

值得 一 提 的 是 ，ECMAScript 5 移 除 了 八进制 的 默认 表示 法 ， 这 避 
免 了 其 在 parseIntO 中 与 十 进 制 的 混 请 。 





3.2.2 parseFloat() 


parseFloatO 的 功能 与 parseInt0 基 本 相同 ， 只 不 过 它 仅 文 持 将 输入 值 
转换 为 十 进 制 数 。 因 此 ， 该 函数 只 有 一 个 参数 。 

> parseFloat('123'); 

123 

> parseFloat('1.23'); 

1.23 

> parseFloat('1.23abc.00’); 

1.23 

> parseFloat(‘a.bc1.23'); 

NaN 


与 parseInt() 相 同 的 是 ，parseFloat0 在 过 到 第 一 个 异常 字符 时 束 会 放 
弃 ， 无 论 剩 余 的 那 部 分 字符 串 是 否 可 用 。 

> parseFloat('al23.34'); 

NaN 

> parseFloat('12a3.34'); 

12 

此 外 ，PparseFloatO 还 可 以 接受 指数 形式 的 数据 〈 这 点 与 parseInt(0) 不 


-> 


> parseFloat('123e-2"); 
1.23 

> parseFloat('1e10'); 
10000000000 

> parselnt('1e10'); 

1 


3.2.3 isNaN 


通过 isNaNO， 我 们 可 以 确定 东 个 输入 值 是 否 是 一 个 可 以 参与 算术 
运算 的 数字 。 因 而 ， 该 函数 也 可 以 用 来 检测 parseInt() 和 parseFloat() 的 调 
用 成 功 与 否 。 

> isNaN(NaN); 

true 

> isNaN(123); 

false 

> isNaN(1.23); 

false 

> isNaN(parseInt(‘abc123')); 


true 
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> isNaN(‘1.23'); 

false 

> isNaN(‘al.23'); 

true 

isNaNO 函 数 是 非常 有 用 的 ， 因 为 NaN 自 己 不 存在 等 值 的 概念 ， 也 就 
是 说 表达 式 NaN === NaN 返回 的 是 false， 这 确实 让 人 觉得 有 点 匪夷所思 
ji) 





3.2.4 isFinite() 


isFinite() FY 以 用 来 检查 输入 是 否 是 一 个 既 非 Infinity 也 非 NaN 的 数 


> isFinite(Infinity); 

false 

> isFinite(-Infinity); 

false 

> isFinite(12); 

true 

> isFinite(1e308); 

true 

> isFinite(1e309); 

false 

关于 后 两 个 调用 的 结果 ， 我 们 可 以 回忆 上 一 章 中 的 内 容 ， 即 
JavaScript 中 的 最 大 数字 为 1.7976931348623157e+308， 因 此 1e309 会 被 视 
作为 无 穷 数 。 


3.2.5 URI 的 编码 与 反 编 码 


Æ URL (Uniform Resource ”Locator， 统 一 资源 定位 符 ) 或 
URI (Uniform Resource Identifier， 统 一 资源 标识 符 ) 中 ， 有 一 些 字 符 是 
具有 特殊 含义 的 。 如 果 我 们 想 “ 转 义 ” 这 些 字符 ， 就 可 以 去 调用 函数 
encodeURI() 或 encodeURIComponent()。 前 者 会 返回 一 个 可 用 的 ”URL， 
而 后 者 则 会 认为 我 们 所 传递 的 仅仅 是 URL 的 一 部 分 。 例 如 ， 对 于 下 面 
这 个 查询 字符 串 来 说 ， 这 两 个 函数 所 返回 的 字符 编码 分 别 是 : 

> var url = 'http://www.packtpub.com/scr ipt.php?q=this and that’; 

> encodeURI(url); 

"http://www.packtpub.com/scr%20ipt.php?q=this%20and%20that" 

> encodeURIComponent(url); 

"http%3A %2F%2Fwww.packtpub.com%2Fscr%20ipt.php%3Fq%3Dthis 

encodeURIO 和 encodeURIComponentO 分 别 都 有 各 目 对 应 的 反 编 码 
函数 : decodeURIO 和 decodeURIComponent(). 

另外 ， 我 们 有 时 候 还 会 在 一 些 遗 留 代 码 中 看 到 相似 的 编码 函数 和 友 
编码 函数 escape0 和 unescape0， 但 我 们 并 不 锣 成 使 用 这 些 函 数 来 执行 相 
天 的 操作 ， 它 们 的 编码 规则 也 不 鲜 相同 。 








3.2.6 eval 


eval0 会 将 其 输入 的 字符 串 当 做 JavaScript 代 码 来 执行 。 

> eval('var ii = 2;'); 

> jl; 

2 

所 以 ， 这 里 的 eval('var ii = 2;") 与 表达 式 var ii = 2; 的 执行 效果 是 相同 
的 。 
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避免 使 用 它 。 毕 竟 在 大 多 数 情况 下 ， 我 们 有 更 优雅 的 选择 ， 这 些 
写 和 维护 。 对 于 许多 经 验 丰 富 的 JavaScript 程序 员 
来 说 , “Eval is evil” (Eval TER) 是 一 句 至 理 名 言 。 

因为 eval0 是 这 样 一 种 函数 : 

安全 性 方面 JavaScript 拥有 的 功能 很 强大 ， 但 这 也 意味 着 很 大 
的 不 确定 性 ， 如 果 您 对 放 在 eval0 函 数 中 的 代码 没有 太 多 把 握 ， 最 好 还 
是 不 要 这 样 使 用 。 

性 能 方面 一 一 它 是 一 种 由 函数 执行 的 “动态 ”代码 ， 所 以 要 比 直 接 执 
行 脚 本 要 慢 。 











接 下 来 ， 让 我 们 来 看 一 个 非常 常见 的 函数 一 一 alert()。 该 函数 不 是 
JavaScript 核 心 的 一 部 分 〈 即 它 没有 包括 在 ECMA 标 准 中 ) ， 而 是 由 答 主 
环境 一 浏览 器 所 提供 的 ， 其 作用 是 显示 一 个 带 文 本 的 消息 对 话 框 。 这 对 
于 某 些 调试 很 有 帮助 。 当 然 ， ”大 多 数 情 况 下 ， 现 代 浏 览 器 的 调试 工具 
更 加 好 用 一 些 。 

图 3-1 就 是 alert("hello!") 的 执行 效果 图 。 


The page at hitp://phpied.com says: 











hella! 





当然 ， 在 使 用 这 个 函数 之 前 ， 我 们 必须 要 明白 这 样 做 会 阻塞 当前 的 
浏览 器 线程 。 也 惑 是 说 ， 在 alertO 的 执行 窗口 关闭 之 前 ， 当 前 所 有 的 代 
码 都 会 暂停 执行 。 因 此 ， 对 于 一 个 忙碌 的 AJAX 应 用 程序 来 说 ，alert0 通 
常 不 是 一 个 好 的 选择 。 





3.3 Oe ia 


这 是 一 个 至 关 重 要 的 问题 。 特 别 是 当 我 们 从 别 的 语言 转向 JavaScript 
时 ， 必 须要 明白 一 点 ， 即 在 JavaScript 中 ， 变 量 的 定义 并 不 是 以 代码 块 作 
为 作用 域 的 ， 而 是 以 函数 作为 作用 域 。 也 就 是 说 ， 如 果 变 量 是 在 茶 个 函 
数 中 定义 的 ， 那 么 它 在 函数 以 外 的 地 方 是 不 可 见 的 。 而 如 有 果 该 变量 是 定 
义 在 if 或 者 for 这 样 的 代码 块 中 的 ， 它 在 代码 块 之 外 是 可 见 的 。 男 外 ， 在 
JavaScript 中 ， 术 语 “ 全 局 变量 ” 指 的 是 定义 在 所 有 函数 之 外 的 变量 (也 就 
是 定义 在 全 局 代码 中 的 变量 ) ， 与 之 相对 的 是 “局 部 变量 *”， 所 指 的 则 是 
在 菏 个 函数 中 定义 的 变量 。 其 中 ， 函 数 内 的 代码 可 以 像 访 问 自己 的 局 部 
变量 那样 访问 全 局 变量 ， 反 之 则 不 行 。 

下 面 来 看 一 个 具体 示例 ， 请 注意 两 点 : 

函数 f) 可 以 访问 变量 global。 

在 函数 f0 以 外 ， 变 量 local 是 不 存在 的 。 

var global = 1; 





























function f() { 
var local = 2; 
global++; 
return global; 
} 
让 我 们 来 测试 一 下 : 
> fQ; 
2 
> fQ; 
3 


> local; 

ReferenceError: local is not defined 

这 里 还 有 一 点 很 重要 ， 如 果 我 们 声明 一 个 变量 时 没有 使 用 var 语 
句 ， 该 变量 就 会 被 默认 为 全 局 变量 。 让 我 们 来 看 一 个 具体 示例 ， 如 图 3- 
2 所 示 。 








Developer Tools - chrome://newtab/ 
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Elements Resources Network Scripts Timeline Profiles Audits Console Search Console 
> function f () {local = 2} 

indefined 
> local; 


© > ReferenceError: local is not defined 
> f(); 
ur defi ec 
> local; 
2 
> 
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图 3-2 

让 我 们 来 看 看 上 面 究 竟 发 生 了 些 什么 。 Hw RIER OFE 
义 了 一 个 变量 local。 在 该 函数 被 调用 之 前 ， 这 个 变量 是 不 存在 的 。 该 变 
量 会 在 函数 首次 被 调用 时 创建 ， 并 被 赋予 全 局 作用 域 。 这 使 得 我 们 可 以 
在 该 函数 以 外 的 地 方 访问 它 。 

最 佳 实践 

尽量 将 全 局 变量 的 数量 降 到 最 低 ， 以 避免 命名 冲突 。 因 为 如 果 有 
两 个 人 在 同一 段 脚 本 的 不 同 函 数 中 使 用 了 相同 的 全 局 变量 名 ， 就 很 容易 
导致 不 可 预测 的 结果 和 难以 察觉 的 bug。 

最 好 总 是 使 用 var 语句 来 声明 变量 。 

可 以 考虑 使 用 “单一 var 模 式 ， 即 ， 仅 在 函数 体内 的 第 一 行使 用 一 
个 var 来 定义 这 个 作用 域 中 所 有 和 需要 的 变量 。 这 样 一 来 ， 我 们 就 能 很 轻 

















松 地 找到 相关 变量 的 定义 ， 并 且 在 很 大 程度 上 避免 了 不 小 心 污染 全 局 变 
量 的 情况 。 

变量 提升 

下 面 ， 我 们 再 来 看 一 个 很 有 趣 的 例子 ， 它 显示 了 关于 局 部 和 全 局 作 
用 域 的 另 一 个 重要 问题 。 


var a = 123; 








function f() { 
alert(a); 
vara=1; 
alert(a); 
} 
fọ; 
您 可 能 会 想当然 地 认为 alertO0 第 一 次 显示 的 是 123《〈 也 就 是 全 局 变量 
a 的 值 ) ， 而 第 二 次 显示 的 是 1( 即 局 部 变量 a) 。 但 事实 并 非 如 此 ， 第 
一 个 alert0 实 际 上 显示 的 是 undefined， 这 是 因为 函数 域 始终 优先 于 全 局 
域 ， 所 以 局 部 变量 a 会 覆盖 掉 所 有 与 它 同名 的 全 局 变量 ， 尽 管 在 alert() 第 
一 次 被 调用 时 ， a 还 没有 被 正式 定义 〈 即 该 值 为 undefined) ， 但 该 变量 
本 刁 已 经 存在 于 本 地 空间 了 。 这 种 特殊 的 现象 叫做 提升 Choisting) 。 
也 就 是 说 ， 当 JavaScript 执行 过 程 进 入 新 的 函数 时 ， 这 个 函数 内 被 
声明 的 所 有 变量 都 会 被 移动 〈 或 者 说 提升 ) 到 函数 最 开始 的 地 方 。 这 个 
概念 很 重要 ， 必 须 牢 记 。 另 外 需要 注意 的 是 ， 被 提升 的 只 有 变量 的 声 
明 ， 这 意味 着 ， 只 有 函数 体内 声明 的 这 些 变量 在 该 函数 执行 开始 时 就 存 
在 ， 而 与 之 相关 的 赋值 操作 并 不 会 被 提升 ， 它 还 在 其 原来 的 位 置 上 。 璧 
如 在 前 面 的 例子 中 ， 局 部 变量 本 身 被 提升 到 了 函数 开始 处 ， 但 并 没有 在 
开始 处 就 被 赋值 为 1。 
那个 例子 可 以 被 等 价 地 改写 为 : 


var a = 123; 









































function f() { 
var a; // same as: var a = undefined; 
alert(a); // undefined 
a=1; 
alert(a); // 1 
} 
当然 ， 我 们 也 可 以 采用 在 最 佳 实践 中 提 到 过 的 单一 var 模 式 。 在 这 
个 例子 中 ， 我 们 可 以 手动 提升 变量 声明 的 位 置 ， 这 样 一 来 代码 就 不 会 被 
JavaScript 的 提升 行为 所 混淆 了 。 





3.4 pA BC tH ce BT 


在 JavaScript 中 ， 函 数 实际 上 也 是 一 种 数据 。 这 概念 对 于 我 们 日 后 
的 学 习 人 至 关 重 要 。 也 就 是 说 ， 我 们 可 以 把 一 个 函数 赋值 给 一 个 变量 。 

varf = function() { 

return 1; 

}; 

上 面 这 种 定义 方式 通常 被 叫做 函数 标识 记 法 (function literal 
notation) 。 

function(){ return 1;} 是 一 个 函数 表达 式 。 函 数 表达 式 可 以 被 命名 ， 
称 为 命名 函数 表达 式 (named function expression, NFE) 。 所 以 以 下 这 
种 情况 也 是 合法 的 ， 虽 然 我 们 不 常常 用 到 (在 这 里 ，myFunc 是 函数 的 
名 字 ， 而 不 是 变量 ;， IE 会 错误 地 创建 ff 和 myFunc 两 个 变量 屋 ) : 


var f = function myFunc() { 





return 1; 
}: 
这 样 看 起 来 ， 似 乎 命名 函数 表达 式 与 函数 声明 没有 什么 区 别 。 但 它 
们 其 实 是 不 同 的 。 两 者 的 差别 表现 于 它们 所 在 的 上 下 文 。 函 数 声 明 只 会 
出 现在 程序 代码 里 《在 另 一 个 函数 的 函数 体 中 ， 或 者 在 程序 主体 中 ) 。 
本 书 的 后 续 章 节 会 有 更 多 的 举例 来 前 明 这 些 概念 。 
如 果 我 们 对 函数 变量 调用 typeof， 操 作 符 返回 的 字符 串 将 会 


是 "function"。 











> function define() { 
return 1; 


} 


> var express = function () { 
return 1; 

}; 

> typeof define; 

"function" 

> typeof express; 


"function" 


PEA, JavaScript 中 的 函数 也 是 一 种 数据 ， 只 不 过 这 种 特殊 的 数据 


类 型 有 两 个 重要 的 特性 。 


它们 所 包含 的 是 代码 。 
它们 是 可 执行 的 (或 者 说 是 可 调用 的 〉。 
和 我 们 之 前 看 到 的 一 样 ， 要 调用 茶 个 函数 ， 只 需要 在 它 的 名 字 后 面 





加 一 对 括号 即 可 。 我 们 再 来 看 一 个 示例 ， 下 面 这 段 代码 工作 与 函数 的 定 
义 方式 无 天 ， 它 演示 的 是 如 何 像 变量 那样 使 用 函数 一 一 也 就 是 说 ， 我 们 
可 以 将 它 拷贝 给 不 同 的 变量 。 


> var sum = function(a, b) { 
return a + b; 
i 
> var add = sum; 
> typeof add; 
"function" 
> add(1, 2); 
3 
HH ek) ne ee ee AA ea R 


变量 相 所 \ 能 以 数字 开头 ， 并 且 可 以 由 任意 的 字母 、 数 
ge 














3.4.1 E 4 KZ 


正如 您 所 知 ， 我 们 可 以 这 样 定 义 一 个 函数 : 
var f = function(a){ 


return a; 


一 一 
过 





通过 这 种 方式 定义 的 函数 利和 被 称 为 匿名 函数 〈 即 没有 名 字 的 函 
数 ) ， 特 别 是 当 它 不 被 赋值 给 变量 单独 使 用 的 时 候 。 在 这 种 情况 下 ， 此 
类 函数 有 两 种 优雅 的 用 法 : 

您 可 以 将 匿名 函数 作为 参数 传递 给 其 他 函数 ， 这 样 ， 接 收 方 函数 就 
能 利用 我 们 所 传递 的 函数 来 完成 条 些 事情 。 

您 可 以 定义 茶 个 匿名 函数 来 执行 茶 些 一 次 性 任务 。 

接 下 来 ， 我 们 来 看 两 个 具体 的 应 用 示例 ， 通 过 其 中 的 细节 来 进一步 
了 解 匿名 函数 。 








3.4.2 回调 函数 


既然 函数 与 任何 可 以 被 赋值 给 变量 的 数据 是 相同 的 ， 那 么 它 当 然 可 
以 像 其 他 数据 那样 被 定义 、 删 除 、 找 贝 ， 以 及 当成 参数 传递 给 其 他 函 
数 。 

在 下 面 的 示例 中 ， 我 们 定义 了 一 个 函数 ， 这 个 函数 有 两 个 函数 类 型 
的 参数 ， 然 后 它 会 分 别 执行 这 两 个 参数 所 指 问 的 函数 ， 并 返回 它们 的 返 
回 值 之 和 。 

function invokeAdd(a, b){ 

return a() + b0; 

下 面 让 我 们 来 简单 定义 一 下 这 两 个 参与 加 法 运算 的 函数 〈 使 用 函数 


声明 模式 ) ， 它 们 只 是 单纯 地 返回 一 个 固定 值 : 
function one() { 
return 1; 
} 
function two() { 
return 2; 
} 
现在 ， 我 们 只 需 将 这 两 个 函数 传递 给 目标 函数 invokeAdd(), tE 
以 得 到 执行 结果 了 : 
> invokeAdd(one, two); 
3 
事实 上 ， 我 们 也 可 以 直接 用 匿名 函数 《〈 即 函数 表达 式 ) OR A one() 
和 two0， 以 作为 目标 函数 的 参数 ， 例 如 
> invokeAdd(function () {return 1; }, function () {return 2; }); 
3 
或 许 ， 我 们 可 以 换 一 种 可 读 性 更 高 的 写法 : 
> invokeAdd( 
function () { return 1; }, 
function () { return 2; } 
); 
3 
当然 ， 您 也 可 以 这 样 写 : 
> invokeAdd( 
function () { 
return 1; 
}; 


function () { 


return 2; 
} 
); 
3 
当 我 们 将 函数 A 传 递 给 函数 B， 并 由 B 来 执行 A 时 ，A 就 成 了 一 个 回 
调 函 数 〈callback functions) 。 如 果 这 时 A 还 是 一 个 无 名 函数 ， 我 们 就 称 
它 为 匿名 回调 函数 。 
那么 ， 应 该 什么 时 候 使 用 回调 函数 呢 ?” 下 面 我 们 将 通过 几 个 应 用 实 
例 来 示范 下 回调 函数 的 优势 ， 包 括 : 
它 可 以 让 我 们 在 不 做 命名 的 情况 下 传递 函数 (这 意味 着 可 以 节省 变 
量 名 的 使 用 ) 。 
我 们 可 以 将 一 个 函数 调用 操作 委托 给 为 一 个 函数 (这 意味 着 可 以 市 
省 一 些 代 码 编写 工作 )。 
它们 也 有 助 于 提升 性 能 。 











3.4.3 回调 示例 


在 编程 过 程 中 ， 我 们 通常 需要 将 一 个 函数 的 返回 值 传递 给 男 一 个 函 
数 。 在 下 面 的 例子 中 ， 我 们 定义 了 两 个 函数 ， 第 一 个 是 
multiplyByTwo()， 该 函数 会 通过 一 个 循环 将 其 所 接受 的 三 个 参数 分 别 乘 
以 2， 并 以 数组 的 形式 返回 结果 ; 第 二 个 函数 addOne() 只 接受 一 个 值 ， 
然后 将 它 加 1 并 返回 。 
function multiplyByTwo(a, b, c) { 
var i, ar = []; 
for(i = 0; i < 3; i++) { 
ar[i] = arguments[i] * 2; 


} 


return ar; 
} 
function addOne(a) { 
return a + 1; 
} 
现在 ， 我 们 来 测试 一 下 这 两 个 函数 ， 结 果 如 下 : 
> multiplyByTwo(1, 2, 3); 
[2, 4, 6] 
> addOne(100); 
101 
接 下 来 ， 假 设 我 们 有 三 个 元 隶 ， 我 们 要 实现 这 三 个 元 素 在 两 个 函数 
之 间 的 传递 。 这 需要 定义 另 一 个 数组 ， 用 于 存储 来 目 第 一 步 的 结果 。 我 
们 先 从 multiplyByTwo0 的 调用 开始 : 


> var myarr = []; 





> myarr = multiplyByTwo(10, 20, 30); 

[20, 40, 60] 

然后 ， 用 循环 过 历 每 个 元 素 ， 并 将 它们 分 别传 递 给 addOne()。 

> for (var i = 0; i < 3; i++) { 

myarr[i] = addOne(myarr[i]); 
} 

> myarr; 

[21, 41, 61] 

如 您 所 见 ， 这 上 段 代码 可 以 工作 ， 但 是 显然 还 有 一 定 的 改善 空间 。 特 
别 是 这 里 使 用 了 两 个 循环 ， TE el E FF 
销 一 定 不 小 。 因 此 ， 我 们 需要 将 它们 合 二 为 一 。 这 就 需要 对 
multiplyByTwo0 函 数 做 一 些 改动 ， 使 其 接受 一 个 回调 函数 ， 并 在 每 次 迭 
代 操 作 中 调用 它 。 有 具体 如 下 : 





function multiplyByTwo(a, b, c, callback) { 
var i, ar = []; 
for(i = 0; i < 3; i++) { 
ar[i] = callback(arguments[i] * 2); 
} 
return ar; 
} 
函数 修改 完成 之 后 ， 之 前 的 工作 只 需要 一 次 孙 数 调用 就 够 了 ， 我 们 
只 需 像 下 面 这 样 同时 将 初始 值 和 回调 函数 传递 给 它 
> myarr = multiplyByTwo(1, 2, 3, addOne); 
[3, 5, 7] 
同样 ， 我 们 还 可 以 用 匿名 函数 来 代 蔡 addOne()， 这 样 做 可 以 节省 一 
个 额外 的 全 局 变量 。 
> multiplyByTwo(1, 2, 3, function (a){ 
return a + 1; 
}); 
[3, 5, 7] 
而 且 ， 使 用 匿名 函数 也 更 易于 随时 根据 需求 调整 代码 。 例 如 : 
> multiplyByTwo(1, 2, 3, function(a){ 
return a + 2; 
}; 
[4, 6, 8] 


3.4.4 即时 函数 


目前 我 们 已 经 讨论 了 匿名 函数 在 回调 方面 的 应 用 。 接 下 来 ， 我 们 来 
看 匿名 函数 的 另 一 个 应 用 示例 一 一 这 种 函数 可 以 在 定义 后 立即 调用 。 比 


如 : 
( 
function(){ 
alert(‘boo'); 
} 

)0; 

ZINAA LAA AIPA, BRKI f RITR i E A R BL 
AE BE TT SF, AnA AR GES By. R, BLR 
fa S ROBIN EOC ENV aE, TIN Eth ee BAT E 4 PHA IBS BL 
的 地 方 。 

( 


function(name){ 





alert(‘Hello ' + name + '!’); 

} 
)Cdude’); 
男 外 ， 您 也 可 以 将 第 一 对 括号 闭合 于 第 二 对 括 写 之 后 。 这 两 种 做 法 

都 有 效 。 

(function () { 

Wags 
+0); 


// VS. 








(functioin () { 
ee 
DO; 
使 用 即时 ( 自 调 ) 匿名 函数 的 好 处 是 不 会 产生 任何 全 局 变量 。 当 
然 ， 缺 点 在 于 这 样 的 函数 是 无 法 重复 执行 的 〈 除 非 您 将 它 放 在 茶 个 循环 
或 其 他 函数 中 ) 。 这 也 使 得 即时 函数 非常 适合 于 执行 一 些 一 次 性 的 或 初 














始 化 的 任务 。 
如 果 需 要 的 话 ， 即 时 函数 也 可 以 有 返回 值 ， 虽 然 并 不 常见 : 
var result = (function () { 
// something complex with 
// temporary local variables... 
es 
// return something; 
70); 
当然 在 这 个 例子 中 ， 将 整个 函数 表达 式 用 括号 包 起 来 是 不 必要 的 ， 
我 们 只 要 在 函数 最 后 使 用 一 对 括号 来 执行 这 个 图 数 即 可 。 所 以 上 例 又 可 
以 改 为 : 


var result = function () { 





// something complex with 
// temporary local variables... 


// return something; 


30; 
虽然 这 种 写法 也 有 效 ， Rn 
你 束 无 法 知道 result 到 底 是 一 个 函数 ， 还 是 一 个 即时 函数 的 返回 值 。 


3.4.5 内 部 《私有 ) KZ 


想必 我 们 都 记得 ， 函 数 与 其 他 类 型 的 值 本 质 上 是 一 样 的 ， 因 此 ， 没 
有 什么 理由 可 以 阻止 我 们 在 一 个 函数 内 部 定义 另 一 个 函数 。 
function outer(param) { 
function inner(theinput) { 


return theinput * 2; 


return "The result is ' + inner(param); 
} 
我 们 也 可 以 改 用 函数 标识 记 法 来 号 这 段 代 码 : 


var outer = function (param) { 





var inner = function (theinput) { 
return theinput * 2; 
}; 
return 'The result is ' + inner(param); 
}; 
当 我 们 调用 全 局 函数 outer0 时 ， 本 地 函数 inner() 也 会 在 其 内 部 被 调 
用 。 由 于 innerO 是 本 地 函数 ， 它 在 outerO 以 外 的 地 方 是 不 可 见 的 ， 所 以 
我 们 也 能 将 它 称 为 私有 函数 。 
> outer(2); 
"The result is 4" 
> outer(8); 
"The result is 16" 
> inner(2); 
ReferenceError: inner is not defined 
使 用 私有 函数 的 好 处 主要 有 以 下 几 点 : 
有 助 于 我 们 确保 全 局 名 字 空 间 的 纯净 性 (这 意味 着 命名 冲突 的 机 会 
很 小 ) 。 
确保 私有 性 一 一 这 使 我 们 可 以 选择 只 将 一 些 必 要 的 函数 暴露 给 “外 
部 世界 ”， 而 保留 属于 目 己 的 函数 ， 使 它们 不 为 该 应 用 程序 的 其 他 部 分 
所 用 。 

















正如 之 前 所 提 到 的 ， 函 数 始终 都 会 有 一 个 返回 值 ， 即 便 不 是 显 式 返 
回 ， 它 也 会 隐 式 返回 一 个 undefined。 既 然 函 数 能 返回 一 个 唯一 值 ， 那 么 
这 个 值 就 也 有 可 能 是 男 一 个 函数 。 例 如 : 

function a() { 

alert(A!'); 

return function(){ 
alert('B!'); 

i 

} 

在 这 个 例子 中 ， 函 数 a0) 会 在 执行 它 的 工作 (弹出 'Ar) 之 后 返回 另 
一 个 函数 。 而 所 返回 的 函数 又 会 去 执行 男 外 一 些 事情 (弹出 'BI) o R 
们 只 需 将 该 返回 值 赋值 给 某 个 变量 ， 然 后 就 可 以 像 使 用 一 般 函 数 那 样 调 
用 它 了 。 


> var newFunc = a(); 





> newFunc(); 

如 您 所 见 ， 上 面 第 一 行 执行 的 是 alert(A!')， 第 二 行 才 是 alert ('B!")。 

如 果 您 想 让 返回 的 函数 立即 执行 ， 也 可 以 不 用 将 它 赋值 给 变量 ， 直 
接 在 该 调用 后 面 再 加 一 对 括号 即 可 ， 效 果 是 一 样 的 : 

> a00; 








3.4.7 能 重 写 自己 的 也 类 


由 于 一 个 函数 可 以 返回 力 一 个 函数 ， 因 此 我 们 可 以 用 新 的 函数 来 履 
六 旧 的 。 例 如 在 之 前 的 例子 中 ， 我 们 也 可 以 通过 a() 的 返回 值 来 重 写 a() 
PAC Ch: 

> a= al); 


当前 这 名 依然 只 会 执行 alert (A!), (Aa REI a0， 它 就 


会 执行 alert (BI) So MTT BT HEHE — VE SR CLE AY PRIOR ht a= 
非常 有 用 。 这 样 一 来 ， 该 函数 可 以 在 第 一 次 被 调用 后 重 写 目 己 ， 从 而 避 
免 了 每 次 调用 时 重复 一 些 不 必要 的 操作 。 

在 上 面 的 例子 中 ， 我 们 是 在 外 和 面 来 重 定义 该 函数 的 一 一 即 我 们 将 函 
数 返回 值 赋值 给 函数 本 身 。 但 我 们 也 可 以 让 函数 从 内 部 重 写 自 己 。 例 
如 : 

function a() { 

alert('A!”; 

a = function(){ 
alert('B!'); 

Ie 

} 

这 样 一 来 ， 当 我 们 第 一 次 调用 该 函数 时 会 有 如 下 情况 发 生 。 

alert (AI 将 会 被 执行 “可 以 视 之 为 一 次 性 的 准备 操作 ) 。 

全 局 变量 a 将 会 被 重 定义 ， 并 被 赋予 新 的 函数 。 

而 如 采 该 函数 再 被 调用 的 话 ， 补 执行 的 就 将 是 alert (B!) 了 。 

下 面 ， 我 们 来 看 一 个 组 合 型 的 应 用 示例 ， 其 中 有 些 技术 我 们 将 会 在 
本 章 最 后 几 节 中 讨论 。 


var a = (function () { 








function someSetup () { 
var setup = 'done’; 

} 

function actualWork() { 
alert(‘Worky-worky'); 

} 

someSetup(); 


return actualWork; 


10); 

在 这 个 例子 中 有 如 下 情况 

我 们 使 用 了 私有 函数 一 一 someSetup() 和 actualWork()。 

我 们 也 使 用 了 即时 函数 一 一 函数 a(0) 的 定义 后 面 有 一 对 括号 ， 因 此 它 
会 执行 自 调 。 

当 该 函数 第 一 次 被 调用 时 ， 它 会 调用 someSetup()， 并 返回 函数 变量 
actualWork 的 引用 。 请 注意 ， 返 回 值 中 是 不 带 括 号 的 ， 因 此 该 结果 仅仅 
是 一 个 函数 引用 ， 并 不 会 产生 函数 调用 。 

由 于 这 里 的 执行 语句 是 以 var a = .开头 的 ， 因 而 该 自 调 函数 所 返回 
的 值 会 重新 赋值 给 a。 

如 果 我 们 想 测 试 一 下 自己 对 上 述 内 容 的 理解 ， 可 以 尝试 回答 一 下 这 
个 问题 : 上面 的 代码 在 以 下 情景 中 分 别 会 alert0) 什 么 内 容 ? 

当 它 最 初 被 载 入 时 。 

之 后 再 次 调用 a0 时 。 

这 项 技术 对 于 某 些 浏览 器 相关 的 操作 会 相当 有 用 。 因 为 在 不 同 浏览 
器 中 ， 实 现 相同 任务 的 方法 可 能 是 不 同 的 ， 我 们 都 知道 浏览 器 的 特性 不 

可 能 因为 函数 调用 而 发 生 任 何 改变 ， 因 此 ， 最 好 的 选择 就 是 让 函数 根据 
其 当前 所 在 的 浏览 器 来 重 定义 自己 。 这 就 是 所 谓 的 “浏览 器 兼容 性 探 
测 ” 技 术 ， 关 于 这 方面 的 应 用 示例 ， 我 们 会 在 本 书后 面 的 章节 中 给 予 展 
TR 0 

















3.5 团 包 


在 本 章 剩 下 的 部 分 中 ， 我 们 来 谈 谈 闭 包 (正好 用 来 关闭 本 章 。 | 
) 。 闭 包 这 个 概念 最 初 接触 起 来 是 有 一 定 难度 的 ， 所 以 即使 您 在 首次 疯 
该 中 没 能 “ 抓 住 ? 重 点 ， 也 大 可 不 必 感 到 灰心 丧气 。 后 续 章 节 中 还 有 大 量 
的 实例 可 供 您 去 慢 慢 理解 它们 ， 所 以 ， 如 果 您 觉得 现在 没有 完全 理解 ， 
可 以 在 以 后 涉及 相关 话题 时 再 回 过 头 来 看 看 这 部 分 内 容 。 

在 我 们 讨论 闭 包 之 前 ， 最 好 先 来 回顾 一 下 JavaScript 中 作用 域 的 概 
念 ， 然 后 再 进行 某 些 话题 扩展 。 


























3.5.1 域 链 





如 您 所 知 ， 尽 管 JavaScript PAGE XRG SRN TEAK, (BEG A 
数 作 用 域 ， 也 就 是 说 ， 在 茶 函 数 内 定义 的 所 有 变量 在 该 函数 外 是 不 可 见 
的 。 但 如 果 该 变量 是 在 某 代码 块 中 被 定 义 的 (如 在 某 个 if 或 for 语 句 
中 ) ， 那 它 在 代码 块 外 是 可 见 的 。 

>vara=1; 

> function f() { 

var b = 1; 
return a; 

} 

> fQ; 

1 

> b; 


ReferenceError: b is not defined 








在 这 里 ， 变 量 a 是 属于 全 局 域 的 ， 而 变量 b 的 作用 域 就 在 函数 fO 内 
So Ar: 

在 fO 内 ，a 和 Pb 都 是 可 见 的 ; 

在 f() 外 ，a 是 可 见 的 ，b 则 不 可 见 。 

在 下 面 的 例子 中 ， 如 果 我 们 在 函数 outer() 中 定义 了 男 一 个 函数 
inner0， 那 么 ， 在 inner(0 中 可 以 访问 的 变量 既 来 自 它 自身 的 作用 域 ， 也 
可 以 来 自 其 “ 父 级 ”作用 域 。 这 就 形成 了 一 条 作用 域 链 (scope chain) ， 
ZEKE CURE) 则 取决 于 我 们 的 需要 。 

var global = 1; 








function outer(){ 
var outer_local = 2; 
function inner() { 
var inner_local = 3; 


return inner_local + outer_local + global; 


} 
return inner(); 
} 
现在 让 我 们 来 测试 一 下 inner0 是 否 真 的 可 以 访问 所 有 变量 : 
> outer(); 
6 





现在 ， 让 我 们 先 通 过 图 示 的 方式 来 介绍 一 下 闭 包 的 概念 。 让 我 们 通 
过 这 段 代 人 码 了 解 其 中 奥秘 。 
var a = "global variable"; 


var F = function () { 


var b = "local variable"; 
var N = function () { 
var c = "inner local"; 
}; 
上 
首先 当然 就 是 全 局 作用 域 G， 我 们 可 以 将 其 视 为 包含 一 切 的 宇宙 。 


You are here 





其 中 可 以 包含 各 种 全 局 变量 〈 如 al，a2) 和 函数 (如 F) 。 


每 个 函数 也 都 会 拥有 一 块 属于 自己 的 私 用 空间 ， 用 以 存储 一 些 别 的 
变量 (例如 Cb) 以 及 内 部 函数 (例如 N，〉。 所 以 ， 我 们 最 终 可 以 把 示意 
图 画 成 这 样 。 








在 上 图 中 ， 如 果 我 们 在 a 点 ， 那 么 就 位 于 全 局 空间 中 。 而 如 果 是 在 b 
点 ， 我 们 就 在 函数 F 的 空间 里 ， 在 这 里 我 们 既 可 以 访问 全 局 空间 ， 也 可 
以 访问 FF 空间 。 如 果 我 们 在 c 点 ， 那 就 位 于 函数 N 中 ， 我 们 可 以 访问 的 空 
间 包 括 全 局 空间 、EF 空 间 和 N 空 间 。 其 中 ，a 和 b 之 间 是 不 连通 的 ， 因 为 b 
在 F 以 外 是 不 可 见 的 。 但 如 果 愿 意 的 话 ， 我 们 是 可 以 将 c 点 和 b 点 连通 起 
来 的 ， 或 者 说 将 N 与 b 连 通 起 来 。 a 并 止 
步 于 全 局 空间 以 内 时 ， 就 产生 了 一 件 有 趣 的 东 














知道 接 下 来 会 发 生 什么 吗 ? N 将 会 和 a 一 样 置身 于 全 局 空间 。 而 且 由 
于 函数 还 记得 它 在 被 定义 时 所 设 定 的 环境 ， 因 此 它 依 然 可 以 访问 F 空 间 
并 使 用 b。 这 很 有 趣 ， 因 为 现在 N 和 a 同 处 于 一 个 空间 ， 但 N 可 以 访问 b， 
而 a 不 能 

那么 ，N 究竟 是 如 何 突破 作用 域 链 的 呢 ? 我 们 只 需要 将 它们 升级 为 
全 局 变量 〈 不 使 用 var 语 句 ) 或 通过 F 传 递 (或 返回 ) 给 全 局 空间 即 可 。 
下 面 ， 我 们 来 看 看 具体 是 怎么 做 的 。 

3.5.2.1 闭 包 #1 

首先 ， 我 们 先 来 看 一 个 函数 。 这 个 函数 与 之 前 所 摘 述 的 一 样 ， 只 不 














过 在 F 中 多 了 返回 N， 而 在 函数 N 中 多 了 返回 变量 b，N 和 b 都 可 通过 作用 
域 链 进行 访问 。 
var a = "global variable"; 
var F = function () { 
var b = "local variable"; 
var N = function () { 
var c = "inner local"; 
return b; 
ig 
return N; 
}: 
函数 F 中 包含 了 局 部 变量 b， 因 此 后 者 在 全 局 空间 里 是 不 可 见 的 。 
>b; 
ReferenceError: b is not defined 
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所 以 b 对 它 来 说 是 可 见 的 。 因 为 FO 是 可 以 在 全 局 空间 中 被 调用 的 〈 它 
一 个 全 局 函数 ) ， 所 以 我 们 可 以 将 它 的 返回 值 赋值 给 男 一 个 全 局 a 
从 而 生成 一 个 可 以 访问 FO 私 有 空间 的 新 全 局 函数 。 


> var inner = F(); 











> inner(); 

"local variable" 

3.5.2.2 闭 包 #2 

ee 与 之 前 相同 ， 但 在 实现 方法 上 存在 一 些 细 
微 的 不 同 。 在 这 里 FO 不 再 返回 函数 了 ， 而 是 直接 在 函数 体内 创建 一 个 
新 的 全 局 函数 inner()。 

首先 ， 我 们 需要 声明 一 个 全 局 函数 的 占 位 符 。 尽 管 这 种 占 位 符 不 是 
必须 的 ， 但 最 好 还 是 声明 一 下 ， 然 后 ， 我 们 就 可 以 将 函数 F() 定 义 如 








var inner; // placeholder 
var F = function (){ 
var b = "local variable"; 
var N = function () { 

return b; 

i 

inner = N; 
Ve 
现在 ， 请 读者 目 行 尝试 ，FO 被 调用 时 会 发 生 什 么 : 

> FQ); 

我 们 在 FO 中 定义 了 一 个 新 的 函数 NO， 并 且 将 它 赋 值 给 了 全 局 变量 
inner。 由 于 NO 是 在 FO 内 部 定义 的 ， 它 可 以 访问 FO 的 作用 域 ， 所 以 即 
使 该 函数 后 来 升级 成 了 全 局 函数 ， 但 它 依 然 可 以 保留 对 FO 作用 域 的 访 
问 权 。 


> inner(); 











"local variable". 

3.5.2.3 相关 定义 与 闭 包 #3 

事实 上 ， 每 个 函数 都 可 以 被 认为 是 一 个 闭 包 。 因 为 每 个 函数 都 在 其 
所 在 域 “ 即 该 函数 的 作用 域 ) 中 维护 了 某 种 私有 联系 。 但 在 大 多 数 时 
候 ， 该 作用 域 在 函数 体 执 行 完 之 后 就 自行 销 蝶 了 一 一 除非 发 生 一 些 有 趣 
的 事 《 比 如 像 上 一 小 节 所 述 的 那样 ) ， 导 致 作用 域 被 保持 。 

根据 目前 的 讨论 ， 我 们 可 以 说 ， 如 果 一 个 函数 会 在 其 父 级 函数 返回 
之 后 留 住 对 父 级 作用 域 的 链接 的 话 _ 多 ， 相 关闭 包 就 会 被 创建 起 来 。 但 
其 实 每 个 函数 本 号 就 是 一 个 闭 包 ， 因 为 每 个 函数 至 少 都 有 访问 全 局 作用 
域 的 权限 ， 而 全 局 作用 域 是 不 会 被 破坏 的 。 





让 我 们 再 来 看 一 个 财 包 的 例子 。 这 次 我 们 使 用 的 是 函数 参数 
(function parameter) 。 该 参数 与 函数 的 局 部 变量 没什么 不 同 ， 但 它们 
oe 我 们 在 这 里 创建 了 一 


Ne. 函数 将 返回 一 个 子 函 数 ， 而 这 个 子 函数 返回 的 则 是 其 父 函 数 
的 参数 


function F(param) { 
var N = function(){ 
return param; 
i 
param++; 
return N; 
} 
然后 我 们 可 以 这 样 调用 它 : 
> var inner = F(123); 
> inner(); 
124 
请 注意 ， Bie ap cian seins Gall eae arcane ia 的 
递增 操作 了 。 上 所 以 innerO 返 回 的 是 更 新 后 的 值 。 由 此 我 们 可 以 看 出 ， 
数 所 绑 定 的 是 作用 域 本 号 ， 而 不 是 在 函数 定义 时 该 作用 域 中 cee 
量 当 前 所 返回 的 值 。 
3.5.2.4 人 循环 中 的 闭 包 
接 下 来 ， 让 我 们 来 看 看 新 手 们 在 闭 包 问题 上 会 犯 哪些 典型 的 错误 。 
毕竟 由 闭 包 所 导致 的 bug 往 往 很 难 被 发 现 ， 因 为 它们 总 是 表面 上 看 起 来 
一 切 正 常 。 
让 我 们 来 看 一 个 三 次 的 循环 操作 ， 它 在 每 次 迭代 中 痢 会 创建 一 
回 当 前 循环 序号 的 新 函数 。 该 新 函数 会 被 添加 到 一 个 数组 中 ， 并 最 终 





相反 
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回 。 有 具体 代码 如 下 : 
function F() { 
var arr = [], i; 
for (i = 0; i < 3; i++) { 
arr[i] = function () { 
return 1; 
}; 
} 
return arr; 
} 
下 面 ， 我 们 来 运行 一 下 函数 ， 并 将 结果 赋值 给 数组 arr。 
> var arr = F(); 
现在 ， 我 们 拥有 了 一 个 包含 三 个 图 数 的 数组 。 您 可 以 通过 在 每 个 数 
组 元 素 后 面 加 一 对 括号 来 调用 它们 。 按 通常 的 估计 ， 它 们 应 该 会 依照 循 
环 顺序 分 别 输出 0、1 和 2， 下 面 就 让 我 们 来 试 试 : 
> arr[0]0; 
3 
> arr[1]Q; 
3 
> arr[2]0; 
3 
显然 ， 这 并 不 是 我 们 想 要 的 结果 。 究 竟 是 怎么 回 事 呢 ? 原来 我 们 在 
这 里 创建 了 三 个 财 包 ， 而 它们 都 指向 了 一 个 共同 的 局 部 变量 i。 但是， 
闭 包 并 不 会 记录 它们 的 值 ， 它 们 所 拥有 的 只 是 相关 域 在 创建 时 的 一 个 连 
接 ( 即 引用 〉 。 在 这 个 例子 中 ， 变 量 i 恰 巧 存 在 于 定义 这 三 个 函数 域 
中 。 对 这 三 个 函数 中 的 任何 一 个 而 言 ， 当 它 要 去 获取 某 个 变量 时 ， 它 会 
从 其 所 在 的 域 开 始 逐 级 寻找 那个 距离 最 近 的 i 值 。 由 于 循环 结束 时 i 的 值 























为 3， 所 以 这 三 个 函数 都 指向 了 这 一 共同 值 。 
为 什么 结果 是 3 不 是 2 呢 ? 这 也 是 一 个 值得 思考 的 问题 ， 它 能 帮助 您 
更 好 地 理解 for 循 环 ， 请 您 自行 思考 。 
那么 ， 应 该 如 何 纠正 这 种 行为 呢 ? 答案 是 换 一 种 财 包 形 式 : 
function F() { 





var arr = [], i; 
for(i = 0; i < 3; i++) { 
arr[i] = (function (x){ 
return function () { 
return x; 
} 
+); 

} 

return arr; 
} 
这 样 融 能 获得 我 们 预期 的 结果 了 : 
> var arr = F(); 
> arr[0]0; 
0 
> arr[1]Q; 
1 
> arr[2]Q; 
2 
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男 一 个 即时 函数 。 在 该 函数 中 ，i 束 被 赋值 给 了 局 部 变量 x， 这 样 一 来 ， 
每 次 达 代 中 的 x 束 会 拥有 各 自 不 同 的 值 了 。 

或 者 ， 我 们 也 可 以 定义 一 个 “正常 点 的 ”内 部 函数 不 使 用 即时 函 
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内 将 的 值 “ 本 地 化 ”。 
function F() { 
function binder(x) { 
return function(){ 
return x; 
t 
} 
var arr = [], i; 
for(i = 0; i < 3; i++) { 
arr[i] = binder(i); 
} 


return alr; 


3.5.3 getter 与 setter 


接 下 来 ， 让 我 们 再 来 看 两 个 关于 闭 包 的 应 用 示例 。 首 先是 创建 
getter 和 setter。 假 设 现在 有 一 个 变量 ， 它 所 表示 的 是 某 类 特定 值 ， 或 某 
特定 区 间 内 的 值 。 我 们 不 想 将 该 变量 暴露 给 外 部 。 因 为 那样 的 话 ， 其 他 
部 分 的 代码 就 有 直接 修改 它 的 可 能 ， 所 以 我 们 需要 将 它 保护 在 相关 函数 
的 内 部 ， 然 后 提供 两 个 额外 的 函数 一 一 一 个 用 于 获取 变量 值 ， 男 一 个 用 
于 给 变量 重新 赋值 。 并 在 函数 中 引入 某 种 验证 措施 ， 以 便 在 赋值 之 前 给 
予 变量 一 定 的 保护 。 另 外 ， 为 简洁 起 见 ， 我 们 对 该 类 中 的 验证 部 分 进行 
了 简化 : 即 这 里 只 处 理 数字 值 。 

我 们 需要 将 getter 和 setter 这 两 种 函数 放 在 一 个 共同 的 函数 中 ， 并 
在 该 函数 中 定义 secret 变 量 ， 这 使 得 两 个 函数 能 够 共享 同一 作用 域 。 具 

















体 代码 如 下 : 
var getValue, setValue; 
(function() { 
var secret = 0; 
getValue = function(){ 
return secret; 
}; 
setValue = function (v) { 
if (typeof v === "number") { 
secret = V; 
} 
i 
1); 
在 这 里 ， 所 有 一 切 都 是 通过 一 个 即时 函数 来 实现 的 ， 我 们 在 其 中 定 
义 了 全 局 函数 setValue() 和 getValue()， 并 以 此 来 确保 局 部 变量 secret 的 不 
可 直接 访问 性 。 
> getValue(); 
0 
> setValue(123); 
> getValue(); 
123 
> SetValue(false); 
> getValue(); 
123 


3.5.4 1% (as 














在 最 后 一 个 关于 闭 包 应 用 的 示例 〈 这 也 是 本 章 的 最 后 一 个 示例 ) 
中 ， 我 们 将 回 您 展示 闭 包 在 实现 欠 代 器 方面 的 功能 。 

通常 情况 下 ， 我 们 都 知 着 如 何 用 循环 来 过 历 一 个 简单 的 数组 ， 但 是 
有 时 候 我 们 需要 面 对 更 为 复杂 的 数据 结构 ， 和 它们 通常 会 有 着 与 数组 截然 
不 同 的 序列 规则 。 这 时 候 就 需要 将 一 些 “ 谁 是 下 一 个 ”的 复杂 逻辑 封 净 成 
易于 使 用 的 nextO 函 数 ， 然 后 ， 我 们 只 需要 简单 地 调用 nextO 惑 能 实现 对 
于 相关 的 过 有 历 操作 了 。 

在 下 面 这 个 例子 中 ， 我 们 将 依然 通过 简单 数组 ， 而 不 是 复杂 的 数据 
结构 来 说 明 问 题 。 该 例子 是 一 个 接受 数组 输入 的 初始 化 函数 ， 我 们 在 其 
中 定义 了 一 个 私有 指针 i， 该 指针 会 始终 指向 数组 中 的 下 一 个 元 素 。 


function setup(x) { 





var i = 0; 
return function(){ 
return x[i++]; 
}; 
} 
现在 ， 我 们 只 需 用 一 组 数据 来 调用 一 下 setupO0， 束 可 创建 出 我 们 所 
需要 的 next() 函 数 ， 具 体 如 下 : 
> var next = setup(['a’, 'b', 'c']); 
这 是 一 种 既 简 单 又 好 玩 的 循环 形式 : 我 们 只 需 重 复 调 用 一 个 函数 ， 
就 可 以 不 停 地 获取 下 一 个 元 素 。 
> next(); 
"a" 
> next(); 
"h" 
> next(); 
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3.6 AX et Ze 


现在 ， 我 们 已 经 完成 了 对 于 JavaScript 函 数 的 基本 概念 介绍 ， 为 今后 
学 习 JavaScript 的 面 同 对 象 特性 ， 以 及 相关 的 现代 编程 模式 打下 了 一 定 的 
基础 。 在 这 之 前 ， 我 们 一 直 在 刻意 回避 有 关 面 向 对 象 特性 的 内 容 ， 但 往 
后 ， 本 书 将 带 您 深入 这 些 更 为 有 趣 的 内 容 。 下 面 ， 让 我 们 再 来 花 一 点 时 
间 回 顾 一 下 本 章 所 讨论 的 内 容 。 

@ ”定义 和 调用 函数 的 基础 知识 
也 可 以 使 用 函数 表达 式 。 

@ 函数 的 参数 及 其 灵活 性 。 

令 内 置 函数 包括 parseInt()、parseFloat()、isNaN()、isFinite()、 
eval0 以 及 对 URL 执 行 编码 、 反 编码 操作 的 四 个 相关 函数 。 

+ JavaScript 变 量 的 作用 域 尽管 这 些 变量 没有 大 括号 级 作用 
域 ， 但 它 有 函数 作用 域 以 及 相关 的 作用 域 链 。 

令 ”了 鸭 数 也 是 一 种 数据 一 一 即 疯 数 可 以 跟 其 他 数据 一 样 被 赋值 给 一 
个 变量 ， 我 们 可 以 据 此 实现 大 量 有 趣 的 应 用 。 例 如 : 

私有 函数 和 私有 变量 。 

匿名 函数 。 

回调 函数 。 

即时 函数 。 

能 重 写 自 身 的 函数 。 

+ Ae. 








您 既 可 以 使 用 函数 声明 语法 ， 














#000 
并 用 
BA 


1. Fi TN EH RA eB, DR AB, 
OFF 应 被 表示 成 rgb(0,0,255) 的 形式 。 然 后 将 函数 命名 为 getRGB0)， 
以 下 代码 进行 测试 。 提 示 : 可 以 将 字符 串 视 为 数组 ， 这 个 数组 的 元 
字符 。 
> var a = getRGB("#00FF00"); 
> al 
"rgb(0, 255, 0)" 
2. 如 果 在 控制 台中 执行 以 下 各 行 ， 分 别 会 输出 什么 内 容 ? 
> parselnt(1e1); 
> parselnt('1e1'); 
> parseFloat('1e1'); 
> isFinite(0/10); 
> isFinite(20/0); 
> isNaN(parseInt(NaN)); 
3. 下 面 代码 中 ，alert0 弹 出 的 内 容 会 是 什么 ? 
var a= 1; 
function f() { 
function n() { 


alert(a); 


吗 ? 


fO; 
4. 以 下 所 有 示例 都 会 弹出 "Boo! "警告 框 ， 您 


4.1 

var f = alert; 
eval(‘f("Boo!")'); 
4.2 

Var €; 

var f = alert; 
eval('e=f')(Boo!'); 
4.3 

(function(){ 


return alert; } 


JOCBoo!’); 





















































分 别 解释 其 中 原因 
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到 目前 为 止 ， 我 们 已 经 了 解 了 JavaScript 中 的 基本 数据 类 型 、 数 组 及 
函数 ， 现 在 是 时 候 学 习 本 书 最 重要 的 一 部 分 内 容 一 一 对 象 了 。 

在 这 一 章 中 ， 我 们 将 介绍 以 下 内 容 : 

如 何 创 建 并 使 用 对 象 。 

什么 是 构造 器 函数 。 

JavaScript 中 的 内 置 对 象 及 其 运用 








4.1 从 数组 到 | 六 








正如 我 们 在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 中 所 
介绍 的 ， 数 组 实际 上 就 是 一 组 值 的 列表 。 该 列表 中 的 每 一 个 值 都 有 自己 
NAR SHE CRNA BEA) ， 索 引 值 从 0 开始 ， 依 次 递增 。 例 如 : 

> var myarr = ['red’, 'blue’, 'yellow’, 'purple']; 

> myarr; 

["red", "blue", "yellow", "purple"]; 

> myarr[0]; 

"red" 

> myarr[3]; 

"purple" 

UR BATE 5] ERAMANA, FREDO DEAR I A, BSS 
列 出 这 样 一 个 键 / 值 表 ， 如 表 4-1 所 示 。 

表 4-1 
索引 键 对 应 值 
red 
blue 


yellow 





və N — © 


purple 
事实 上 ， 对 象 的 情况 跟 数 组 很 相似 ， 唯 一 的 不 同 是 它 的 键 值 类 型 是 
上 自 定 义 的 。 也 融 是 次， 我 们 的 索引 方式 不 再 局 限于 数字 了 ， 而 可 以 使 用 
一 些 更 为 友好 的 键 名 ， 比 如 first_name、age 等 。 
下 面 ， 让 我 们 通过 一 个 简单 的 示例 来 看 看 对 象 是 由 哪 几 部 分 组 成 
的 : 


var hero = { 
breed: 'Turtle', 
occupation: 'Ninja' 
i 
正如 我 们 所 见 : 
这 里 有 一 个 用 于 表示 该 对 象 的 变量 名 hero; 
与 定义 数组 时 所 用 的 中 括号 0 不同， 对 象 使 用 的 是 大 括 写 {}; 
括 写 中 用 去 号 分 割 的 是 组 成 该 对 象 的 元 素 ( 通 常 被 称 之 为 属性 )〉; 
键 / 值 对 之 间 用 冒号 分 割 ， 例 如 ，key: value. 
有 时 候 ， 我 们 还 可 以 在 键 名 《〈 属 性 名 ) 上 面 加 一 对 引号 ， 例 如 ， 下 
面 三 行 代码 所 定义 的 内 容 是 完全 相同 的 : 


var hero = {occupation: 1}; 

















var hero = {"occupation": 1}; 

var hero = {'occupation': 1}; 

通常 情况 下 ， 我 们 不 建议 您 在 属性 名 上 面 加 引号 (这 也 能 减少 一 些 
输入 ) ， 但 在 以 下 这 些 情境 中 ， 引 号 是 必须 的 。 

如 果 属 性 名 是 JavaScript 中 的 保留 字 之 一 的 话 〈 具 体 可 参考 附录 A: 
保留 字 ) 。 

如 果 属 性 名 中 包含 空格 或 其 他 特殊 字符 的 话 (包括 任何 除 字母 、 数 
字 、 下 划 线 及 美元 符号 以 外 的 字符 ) 。 

如 果 属 性 名 以 数字 开头 的 话 。 

总 而 言 之 ， 如 果 我 们 所 选 的 属性 名 不 符合 JavaScript 中 的 变量 命名 
规则 ， 束 必须 对 其 施加 一 对 引号 。 

下 面 ， 让 我 们 来 看 一 个 怪异 的 对 象 定义 : 


var o = { 





Something: 1, 


'yes or no’: ‘yes’, 


"| @#$%A&*': true 

F 

虽然 这 个 对 象 的 属性 名 看 起 来 很 另类 ， 但 该 对 象 是 合法 的 ， 因 为 我 
们 在 它 的 第 二 和 第 三 个 属性 名 上 加 了 引号 ， 人 否则 一 定 会 出 错 。 

在 本 章 稍 后 的 内 容 中 ， 还 会 介绍 除了 [和 人 fy 以 外 的 定义 数组 和 对 象 

的 方法 。 但 首先 要 明白 的 是 当前 这 种 方法 的 术语 名 词 : 用 [定义 数组 的 

方法 我 们 称 之 为 数组 文本 标识 法 (array literal notation) ， 而 同样 的 ， 用 

大 括 与 {} 定 义 对 象 的 方法 就 叫做 对 象 文本 标识 法 (object literal 


notation) 。 
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时 ， 就 会 说 其 中 包含 的 是 属性 。 实 际 上 对 于 JavaScript 来 说 ， 它 们 并 没 
有 多 大 的 区 别 ， 只 是 在 技术 术语 上 的 表达 习惯 有 所 不 同 罢了 。 这 也 是 它 
区 别 于 其 他 程序 设计 语言 的 地 方 。 

男 外 ， 对 象 的 属性 也 可 以 是 函数 ， 因 为 函数 本 里 也 是 一 种 数据 。 在 
这 种 情况 下 ， 我 们 称 该 属性 为 方法 。 例 如 下 面 的 talk 就 是 一 个 方法 : 

var dog = { 

name: 'Benji'’, 

talk: function(){ 
alert(‘Woof, woof!'); 

} 

}; 
按照 上 一 章 的 经 验 ， 我 们 也 可 以 像 下 面 这 样 ， 在 数组 中 存储 一 些 函 
数 元 素 并 在 需要 时 调用 它们 ， 但 这 在 实践 中 并 不 多 见 。 


> var a= |[j: 





> a[0] = function(what){ alert(what); }; 

> aL0]('Boo!'); 

有 了 时候 您 可 能 还 会 看 到 一 个 对 象 的 属性 指向 男 一 个 对 象 属性 的 情 
况 。 而 且 所 指向 的 属性 也 可 以 是 函数 。 


4.1.2 哈 希 表 、 关 联 型 数组 


在 一 些 程序 设计 语言 中 ， a en ts AE tat NEC 

一 般 性 数组 ， 也 叫做 索引 型 数组 或 者 枚 举 型 数组 〈 通 常 以 数字 为 键 
名 ) 。 

关联 型 数组 ， 也 叫做 哈 希 表 或 者 字典 ( 通 第 以 字符 串 为 键 值 〉。 

在 JavaScript 中 ， 我 们 会 用 数组 来 表示 索引 型 数组 ， 而 用 对 象 来 表 
示 关 联 型 数组 。 因 此 ， 如 果 我 们 想 在 JavaScript 中 使 用 哈 希 表 ， 就 必须 要 
用 到 对 象 。 


4.1.3 访问 关 性 


我 们 可 以 通过 以 下 两 种 方式 来 访问 对 象 的 属性 。 
中 括号 表示 法 ， 例 如 hero['occupation']。 
点 号 表示 法 ， ne 如 hero.occupation 。 
相对 而 言 ， 点 号 表示 法 更 易于 读 写 ， 但 也 不 是 总 
则 也 适用 于 引用 属性 名 ， 如 果 我 们 所 访问 的 属性 不 符 
它 就 不 能 通过 点 号 表示 法 来 访问 。 
接 下 来 ， 让 我 们 通过 hero 对 象 来 学 习 一 下 这 两 种 表示 法 : 
var hero = { 
breed: Turtle’, 
occupation: 'Ninja' 


E 








> & 


能 适用 的 。 这 一 规 
合 变 量 命 名 规则 ， 





-> 


下 面 我 们 用 点 号 表示 法 来 访问 属性 : 

> hero.breed; 

"Turtle" 

再 用 中 括号 表示 法 来 访问 属性 : 

> hero['occupation']; 

"Ninja" 

如 末 我 们 访问 的 属性 不 存在 ， 代 码 就 会 返回 undefined。 
> 'Hair color is ' + hero.hair_color; 


"Hair color is undefined" 


另外 ， 由 于 对 象 中 可 以 包 合 任何 类 型 的 数据 ， 目 然 也 包括 其 他 对 


var book = { 
name: 'Catch-22', 
published: 1961, 
author: { 
firstname: ‘Joseph’, 
lastname: ‘Heller’ 
} 
i 
在 这 里 ， 如 果 我 们 想 访问 book 对 象 的 author 属 性 对 象 的 firstmame 属 
惑 需 要 这 样 : 
> book.author.firstname; 
"Joseph" 
当然 ， 也 可 以 连续 使 用 中 括号 表示 法 ， 例 如 : 
> book['author']['lastname']; 
"Heller" 
甚至 可 以 混合 使 用 这 两 种 表示 法 ， 例 如 : 


> book.author['lastname’]; 

"Heller" 

> book['author'].lastname; 

"Heller" 
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使 用 中 括号 表示 法 了 ， 它 人 允许 我 们 在 运行 时 通过 变量 来 实现 相关 属性 的 
动态 存 取 。 


> var key = ‘firstname’; 





> book.author[key]; 
"Joseph" 





由 于 对 象 方法 实际 上 只 是 一 个 函数 类 型 的 属性 ， 因 此 它们 的 访问 方 
式 与 属性 完全 相同 ， 即 用 点 号 表示 法 或 中 括号 表示 法 均 可 。 其 调用 (请 
K) 方式 也 与 其 他 函数 相同 ， 在 指定 的 方法 名 后 加 一 对 括号 即 可 。 例 如 
下 面 的 say 方 法: 


> var hero = { 








breed: Turtle’, 
occupation: 'Ninja’, 
say: function() { 
return 'I am ' + hero.occupation; 
} 
}; 
> hero.say(); 
"Tam Ninja" 


如 果 调 用 方法 时 需要 传递 一 些 参数 ， 做 法 也 和 一 般 函 数 一 样 。 例 


如 : 

> hero.say('a’, 'b', 'c'); 

男 外 ， 由 于 我 们 可 以 像 访问 数组 一 样 用 中 括号 来 访问 属性 ， 因 此 这 
意味 着 我 们 同样 可 以 用 中 括号 来 调用 方法 。 

> hero['say'](Q); 

使 用 中 括号 来 调用 方法 在 实践 中 并 不 常见 ， 除 非 属 性 名 是 在 运行 时 
定义 的 : 

var method = 'say'; 

hero[method](); 

最 佳 实践 提示 : 尽量 别 使 用 引号 《除非 别 无 他 法 ) 

尽量 使 用 点 号 表示 法 来 访问 对 象 的 方法 与 属性 。 不 要 在 对 象 中 使 用 
带 引 号 的 属性 标识 。 








4.1.5 修改 属性 与 方 ; 


由 于 JavaScript 是 一 种 动态 语言 ， 所 以 它 允 许 我 们 随时 对 现存 对 象 
的 属性 和 方法 进行 修改 。 其 中 自然 也 包括 添加 与 删除 属性 。 因 此 ， 我 们 
也 可 以 先 创建 一 个 空 对 象 ， 稍 后 再 为 它 添 加 属性 。 下 面 ， 让 我 们 来 看 看 
具体 是 怎么 做 的 。 

首先 创建 一 个 “ 空 ” 对 象 : 

> var hero = {}: 

ZS ST FE 

在 本 节 ， 我 们 构造 了 一 个 “ 空 ”对 象 : var hero ={};。 这 个 “ 空 ” 字 要 打 
引号 ， 因 为 实际 上 这 个 对 象 并 不 是 空 的 。 虽 然 我 们 并 没有 为 它 定义 属 
性 ， 但 它 本 身 有 一 些 继承 的 属性 。 您 会 在 后 续 章 节 学 习 到 属性 继承 的 知 
识 。 当 然 ， 在 ES3 中 ， 对 象 不 可 能 是 空 的 。 然 而 在 ES5 中 ， 我 们 倒 确实 
是 可 以 真正 创建 一 个 不 继承 任何 属性 的 空 对 象 的 。 但 现在 我 们 暂时 还 是 











将 这 个 知识 先 放 一 放 吧 。 

这 时 候 ， 如 采 我 们 访问 一 个 不 存在 的 属性 ， 就 会 像 这 样 : 

> typeof hero.breed; 

"undefined" 

现在 ， 我 们 来 为 该 对 象 添 加 一 些 属性 和 方法 : 

> hero.breed = ‘turtle’; 

> hero.name = 'Leonardo'; 

> hero.sayName = function() { 

return hero.name; 

}; 
然后 调用 该 方法 : 

> hero.sayName(); 

"Leonardo" 

接 下 来 ， 我 们 删除 一 个 属性 : 

> delete hero.name; 

true 

然后 再 调用 该 方法 ， 它 束 找 不 到 name 属 性 了 : 

> hero.sayName(); 

"undefined" 

灵活 的 对 象 

在 JavaScript 中 ， 对 象 在 任何 时 候 都 是 可 以 改变 的 ， 例 如 增加 、 删 
除 、 修 改 属 性 。 但 这 种 规则 也 有 例外 的 情况 : 某 些 内 建 对 象 的 一 些 属 性 
是 不 可 改变 的 〈 例 如 我 们 之 后 会 讨论 的 Math.PI) 。 另 外 ，ES5 人 允许 创建 
不 可 改变 的 对 象 。 这 方面 的 更 多 知识 请 参考 附录 C: 内 建 对 象 。 


4.1.6 this 





在 之 前 的 示例 中 ， 方 法 sayName0O 是 直接 通过 hero.name 来 访问 hero 
对 象 的 name 属 性 的 。 而 事实 上 ， 当 我 们 处 于 某 个 对 象 的 方法 内 部 时 ， 还 
可 以 用 另 一 种 方法 来 访问 同一 对 象 的 属性 ， 即 该 对 象 的 特殊 值 this。 例 
如 : 
> var hero = { 
name: 'Rafaelo’, 
sayName: function() { 
return this.name; 
} 
}; 
> hero.sayName(); 
"Rafaelo" 
也 就 是 说 ， 当 我 们 引用 this 值 时 ， 实 际 上 上 所 引用 的 就 是 < 这 个 对 
象 ” 或 者 “当前 对 象 ”。 





4.1.7 Rie AS PK AY 


另外 ， 我 们 还 可 以 通过 构造 器 函数 (constructor function) 的 方式 来 
创建 对 象 。 下 面 来 看 一 个 例子 : 

function Hero() { 

this.occupation = 'Ninja’; 

} 

为 了 能 使 用 该 函数 来 创建 对 象 ， 我 们 需要 使 用 new 操 作 符 ， 例 如 : 

> var hero = new Hero(); 

> hero.occupation; 

"Ninja" 
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方式 来 设 定 name 属 性 : 
function Hero(name) { 
this.name = name; 
this.occupation = 'Ninja’; 
this.whoAreY ou = function() { 
return "I'm " + 
this.name + 
"and I'ma" + 
this.occupation; 
}; 
} 
ME, ERAT VI BEA) FD Le] “a OR BSE AS I] AT BRT: 
> var hl = new Hero('Michelangelo’); 
> var h2 = new Hero('Donatello'); 
> hi.whoAreYou(); 
"I'm Michelangelo and I'm a Ninja" 
> h2.whoAreY ou(); 
"I'm Donatello and I'm a Ninja" 
最 佳 实践 
依照 惯例 ， 我 们 应 该 将 构造 器 函数 的 省 字母 大 写 ， 以 便 显著 地 区 别 
于 其 他 一 般 函 数 。 
如 果 我 们 在 调用 一 个 构造 器 函数 时 忽略 了 new 操 作 符 ， 尽 管 代码 不 
会 出 错 ， 但 它 的 行为 可 能 会 令 人 出 乎 预料 ， 例 如 : 
> var h = Hero(‘Leonardo'); 
> typeof h; 


"undefined" 


能 看 出 来 上 面 发 生 了 什么 吗 ? 由 于 这 里 没有 使 用 new 操 作 符 ， 因 此 
AUE 个 新 的 对 象 。 这 个 函数 调用 与 其 他 函数 并 没有 区 别 ， 
这 里 的 h 值 应 该 束 是 该 函数 的 返回 值 。 而 由 于 该 函数 没有 显 式 返回 值 
( 它 没 有 使 用 关键 字 return) ， 所 以 它 实 际 上 返回 的 是 undefined 值 ， 并 
将 该 值 赋值 给 了 h。 

那么 ， 在 这 种 情况 下 this 引 用 的 是 什么 呢 ? 答案 是 全 局 对 象 。 





4.1.8 全 局 对 家 





之 前 ， 我 们 已 经 讨论 过 全 局 变量 〈 以 及 应 该 如 何 避 免 使 用 它们 ) 和 
JavaScript ”程序 在 答 主 环境 (例如 浏览 器 〉 中 的 具体 运行 情况 。 现 在 ， 
我 们 又 学 习 了 对 象 的 相关 知识 ， 是 时 候 了 解 一 些 真 相 了 : 事实 上 ， 程 序 
所 在 的 宿主 环境 一 般 都 会 为 其 提供 一 个 全 局 对 象 ， 而 所 谓 的 全 局 变量 其 
实 都 只 不 过 是 该 对 象 的 属性 罢了 。 

例如 当 程 序 的 宿主 环境 是 Web 浏览 器 时 ， 它 所 提供 的 全 局 对 象 融 是 
window。 另 一 种 获取 全 局 对 象 的 方法 《〈 这 种 方法 在 浏览 器 以 外 的 大 多 
数 其 他 环境 也 同样 有 效 ) 是 在 构造 器 函数 之 外 使 用 this 关键 字 。 例 如 ， 
可 以 在 任何 函数 之 外 的 全 局 代码 部 分 这 么 做 。 

下 面 ， 我 们 来 看 一 个 具体 示例 。 首 先 ， 我 们 在 所 有 函数 之 外 声明 一 
个 全 局 变量 ， 例 如 : 

>vara=1; 

然后 ， 我 们 就 可 以 通过 各 种 不 同 的 方式 来 访问 该 全 局 变量 了 。 

可 以 当做 一 个 变量 a 来 访问 。 

可 以 当做 全 局 对 象 的 一 个 属性 来 访问 ， 例 如 window['a"] 或 者 
window.a。 

可 以 通过 this 所 指向 的 全 局 对 象 属性 来 访问 。 例 如 : 


>vara=1; 

















> window.a; 

1 

> this.a; 

1 

现在 ， 让 我 们 回 过 头 去 分 析 一 下 刚才 那个 不 使 用 new 操 作 符 调用 构 
造 右 函数 的 情况 ， 那 时 候 ，this 值 指向 的 是 全 局 对 象 ， 并 且 所 有 的 属性 
设置 都 是 针对 this 所 代表 的 window 对 象 的 。 

也 就 是 说 ， 当 我 们 声明 了 一 个 构造 函数 ， 但 叉 不 通过 new 来 调用 它 
时 ， 代 码 就 会 返回 undefined: 


> function Hero(name) { 





this.name = name; 
} 
> var h = Hero(‘Leonardo'); 
> typeof h; 
"undefined" 
> typeof h.name; 
TypeError: Cannot read property 'name' of undefined 
由 于 我 们 在 Hero 中 使 用 了 this， 所 以 这 里 就 会 创建 一 个 全 局 变量 
《同时 也 是 全 局 对 象 的 一 个 属性 ) : 
> name; 
"Leonardo" 
> window.name; 
"Leonardo" 
MURRE new sk vil FA AAA Pee a RA, OAT Se BES 
新 对 象 ， 并 且 this 也 会 自动 指向 该 对 象 : 


> var h2 = new Hero('Michelangelo’); 





> typeof h2; 


"object" 

> h2.name; 

"Michelangelo" 

除 此 之 外 ， 我 们 在 第 3 章 : 函数 所 见 的 那些 函数 也 都 可 以 当做 
window 对 象 方法 来 调用 ， 例 如 下 面 两 个 调用 的 效果 完全 相同 : 

> parseInt(101 dalmatians'); 

101 

> window.parseInt('101 dalmatians ); 

101 

并 且 ， 如 果 在 所 有 函数 之 外 ， 这 样 使 用 也 是 可 以 的 : 

> this.parseInt('101 dalmatians'); 

101 


4.1.9 构造 器 属性 


当 我 们 创建 对 象 时 ， 实 际 上 同时 也 赋予 了 该 对 象 一 种 特殊 的 属性 
一 一 即 构造 器 属性 (constructor property) 。 该 属性 实际 上 是 一 个 指向 用 
于 创建 该 对 象 的 构造 器 函数 的 引用 。 

例如 ， 我 们 继续 之 前 的 例子 : 

> h2.constructor; 

function Hero(name){ 

this.name = name; 

} 

SK, E PHA ER HAEA KERNE A AAH 
它 来 创建 一 个 其 他 新 对 象 。 例 如 像 下 面 这 样 ， 大 意 就 是 :“ 无 论 对 象 h2 
有 没有 被 创建 ， 我 们 都 可 以 用 它 来 创建 另 一 个 对 象 ”。 


> var h3 = new h2.constructor('Rafaello’); 





> h3.name; 

"Rafaello" 

另外 ， 如 果 对 象 是 通过 对 象 文本 标识 法 所 创建 的 ，“ 那么 实际 上 它 
束 是 由 内 建构 造 费 Object() 函 数 所 创建 的 (关于 这 一 点 ， 我 们 稍 后 还 会 
再 做 详细 介绍 ) 。 

>varo= {y}; 

> o.constructor; 

function Object(){ [native code] } 

> typeof o.constructor; 


"function" 


eho 


4.1.10 instanceoff/E 4 





通过 instanceof 操作 符 ， 我 们 可 以 测试 一 个 对 象 是 不 是 由 某 个 指定 
的 构造 右 函 数 所 创建 的 。 例 如 : 

> function Hero(){ } 

> var h = new Hero(); 

>varo= {}; 

> h instanceof Hero; 

true 

> h instanceof Object; 

true 

> o instanceof Object; 

true 

请 注意 ， 这 里 的 函数 名 后 面 没有 加 括号 〈 即 不 是 h instanceof 
Hero()) ， 因 为 这 里 不 是 函数 调用 ， 上 所 以 我 们 只 需要 像 使 用 其 他 变量 一 
样 ， 引 用 该 函数 的 名 字 即 可 。 








除了 使 用 new 操 作 符 调 用 构造 器 函数 以 外 ， 我 们 也 可 以 抛 开 new 操 
作 符 ， 只 用 一 般 函 数 来 创建 对 象 。 这 就 需要 一 个 能 执行 某 些 预备 工作 ， 
并 以 对 象 为 返回 值 的 函数 。 

例如 ， 下 面 就 有 一 个 用 于 产生 对 象 的 简单 函数 factory(): 

function factory(name) { 

return { 


Name: Name 


} 

然后 我 们 调用 factory0) 来 生成 对 象 : 

> var o = factory(‘one’); 

> 0.name; 

"one" 

> o.constructor 

function Object(){ [native code] } 

实际 上 ， 构 cium 以 返回 对 象 的 ， 只 不 过 在 this 值 的 使 用 
上 会 有 所 不 同 。 这 意味 着 我 们 需要 修改 构造 器 函数 的 默认 行为 。 下 面 ， 
我 们 来 看 看 具体 是 怎么 做 的 。 

这 是 构造 器 的 一 般 用 法 : 


> function CO { 











this.a = 1; 
} 
> var c = new C(); 
> C.a; 
1 


但 现在 要 考虑 的 是 这 种 用 法 : 

> function C2() { 

this.a = 1; 

return {b: 2}; 

} 

> var c2 = new C2(); 

> typeof c2.a; 

"undefined" 

> c2.b; 

2 

能 看 出 来 发 生 了 什么 吗 ? 在 这 里 ， 构 造句 返回 的 不 再 是 包含 属性 a 
的 this 对 象 ， 而 是 男 一 个 包含 属性 b 的 对 象 _ 出 _。 但 这 也 只 有 在 函数 的 返 
回 值 是 一 个 对 象 时 才 会 发 生 ， 而 当 我 们 企图 返回 的 是 一 个 非 对 象 类 型 
时 ， 该 构造 器 将 会 照常 返回 this。 

关于 对 象 在 构造 器 函数 内 部 是 如 何 创建 出 来 的 ， 您 可 以 设想 在 函数 
开头 处 存在 一 个 叫做 this 的 变量 ， 这 个 变量 会 在 函数 结束 时 被 返回 ， 就 
像 这 样 : 

function CQ) { 





// var this = {}; //pseudo code, you can't do this 
this.a = 1; 
// return this; 


} 
4.1.12 传递 对 象 


当 我 们 找 贝 荣 个 对 象 或 者 将 它 传 递 给 东 个 函数 时 ， 往 往 传 递 的 都 是 
该 对 象 的 引用 。 因 此 我 们 在 引用 上 所 做 的 任何 改动 ， 实 际 上 都 会 影响 它 


所 引用 的 原 对 象 。 


在 下 面 的 示例 中 ， 我 们 将 会 看 到 对 象 是 如 何 赋值 给 另 一 个 变量 的 ， 


并 且 ， 如 采 我 们 对 该 变量 做 一 些 改变 操作 的 话 ， 原 对 象 也 会 跟着 被 改 


变 : 


HY, 


> var original = {howmany: 1}; 

> var mycopy = original; 

> mycopy.howmany; 

1 

> mycopy.howmany = 100; 

100 

> original. howmany; 

100 

同样 的 ， 将 对 象 传递 给 函数 的 情况 也 大 抵 如 此 : 
> var original = {howmany: 100}; 

> var nullify = function(o) {o.howmany = 0;} 
> nullify(original); 

> original. howmany; 

0 


4.1.13 比较 对 象 


当 我 们 对 对 象 进 行 比较 操作 时 ， 当 且 仅 当 两 个 引用 指 癌 同一 个 对 象 
结果 为 tue。 而 如 果 是 不 同 的 对 象 ， 即 使 它们 碰巧 拥有 相同 的 属性 





和 方法 ， 比 较 操 作 也 会 返回 false。 


下 面 ， 我 们 来 创建 两 个 看 上 去 完全 相同 的 对 象 : 
> var fido = {breed: 'dog'}; 
> var benji = {breed: 'dog'}; 


然后 ， 我 们 对 它们 进行 比较 ， 操 作 将 会 返回 false: 

> benji === fido; 

false 

> benji == fido; 

false 

我 们 可 以 新 建 一 个 变量 mydog， 并 将 其 中 一 个 对 象 赋值 给 它 。 这 样 
一 来 mydog 实际 上 就 指向 了 这 个 变量 。 

> var mydog = benji; 

在 这 种 情况 下 ，mydog 与 benji 所 指向 的 对 象 是 相同 的 〈 也 就 是 说 ， 
改变 mydog 的 属性 就 等 同 于 改变 benji〉， 比 较 操作 就 会 返回 true。 


> mydog === benji; 





true 

并 且 ， 由 于 fido 是 一 个 与 mydog 不 同 的 对 象 ， 所 以 它 与 mydog 的 
比较 结果 仍 为 false: 

> mydog === fido; 


false 
4.1.14 Webkit?% fil] G J% 


在 进一步 深入 介绍 JavaScript 的 内 建 对 象 之 前 ， 让 我 们 先 来 了 解 一 些 
对 象 在 Webkit 控 制 台中 的 工作 情况 。 

到 目前 为 止 ， 我 们 已 经 在 本 章 中 测试 了 许多 示例 ， 您 应 该 已 经 注意 
到 了 对 象 在 控制 台中 的 显示 方式 。 如 果 我 们 想 要 创建 一 个 对 象 ， 只 需要 
在 控制 台中 输入 它 的 名 字 并 按 Enter， 后 者 就 会 返回 一 个 单词 Object。 

该 单词 束 代 表 了 我 们 的 新 对 象 ， 它 前 面 还 有 一 个 稍 头 。 用 鼠标 单 击 
这 个 对 象 可 以 展开 它 的 属性 。 如 有 果 某 个 属性 的 值 仍 然 是 个 对 象 ， 我 们 就 
可 以 反复 地 点 击 展开 它 。 展 开 操作 可 以 帮助 您 了 解 对 象 内 部 具体 有 哪些 











属性 。 如 图 4-1 所 示 。 


> var benji = {name: 'Benji', breed: 'dog', obj: {prop: 1}}; 
undefined 
> benji 
Y Object 
breed: "dog" 
name: "Benji" 
Yobj: Object 


__: Object 
> _proto_: Object 


> 


= Q © <topframe> $ @ | Errors Warnings Logs 
图 4-1 

您 可 以 暂时 忽略 proto 属性。 下 一 章 我 们 会 具体 解释 该 属性 。 

console.log 

另外 ， 控 制 台 还 为 我 们 提供 了 一 个 叫做 console 的 对 象 和 一 系列 的 
方法 ， 例 如 console.log0 和 console.error()。 通 过 这 些 函 数 ， 如 图 4-2 所 
示 ， 我 们 可 以 在 控制 台中 显示 我 们 想 要 查看 的 值 。 

Developer Tools - http:/ /www.phpied.com/files/imaje/verbose.html 
a @® he O © AY _ 、、.;S;: 


> console. log(123, “abc"); 
123 “abc" 
¢ undefined 
> console. log(benji); 
Y Object 
breed: "dog" 





name: "Benji" 
> obj: Object 
>__proto_: Object 
< undefined 
> console.error('ouch!'); 
@ pouch! 
< undefined 
>| 
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图 4-2 
其 中 ，console.logO 既 可 以 在 我 们 想 进 行 某 种 快速 测试 时 提供 一 些 
便利 ， 也 可 以 在 我 们 处 理 某 些 真实 脚本 时 记录 一 些 中 间 调 试 信 息 。 例 如 
在 下 面 这 个 例子 中 ， 我 们 示范 了 如 何在 循环 中 使 用 该 函数 : 


> for(var i = 0; i < 5; i++) { 





console.log(i); 


} 


AA WN e O 


4.2 内 建 对 象 


到 目前 为 止 ， 本 章 所 使 用 的 实际 上 都 是 Object0 构 造 右 函数 ， 它 会 
在 我 们 使 用 对 象 文本 标识 法 ， 或 访问 相关 构造 器 属性 时 返回 新 建 的 对 
Ro Objet) Kæ JavaScript 中 众多 内 建构 造 器 之 一 ， 在 本 章 接 下 来 的 内 
容 中 ， 我 们 将 会 为 您 一 一 介绍 其 余 的 内 建构 造 器 。 

内 建 对 象 大 致 上 可 以 分 为 三 大 类 。 

数据 封装 类 对 象 一 -包括 Objects Array. Boolean. Number 和 
String。 这 些 对 象 代表 着 JavaScript 中 不 同 的 数据 类 型 ， 并 且 都 拥有 各 自 
不 同 的 “typeof 返回 值 〈 这 点 我 们 在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 
及 条 件 表达 式 中 讨论 过 ) ， 以 及 undefined 和 null 状 态 。 

工具 类 对 象 一 一 包括 Math、Date、RegExp 等 用 于 提供 便利 的 对 
Ro 

错误 类 对 象 一 一 包括 一 般 性 错误 对 象 以 及 其 他 各 种 更 特殊 的 错误 类 
对 象 。 它 们 可 以 在 某 些 异常 发 生 时 帮助 我 们 纠正 程序 工作 状态 。 

在 本 章 ， 我 们 只 讨论 这 些 内 建 对 象 的 一 小 部 分 方法 。 如 果 想 获得 更 
完整 的 资料 ， 读 者 可 以 参考 附录 C: 内 建 对 象 中 的 内 容 。 

另外 值得 一 提 的 是 ， 不 要 去 纠结 什么 是 内 建 对 象 ， 什 么 是 内 建构 造 
器 ， 实 际 上 它们 是 一 回 事 。 要 不 了 多 久 您 就 会 明白 ， 无 论 是 函数 还 是 构 
造 器 函数 ， 最 后 都 是 对 象 。 




















4.2.1 Object P! 


Object 是 JavaScript 中 所 有 对 象 的 父 级 对 象 ， 这 意味 着 我 们 创建 的 所 
有 对 象 都 继承 于 此 。 为 了 新 建 一 个 空 对 象 ， 我 们 既 可 以 用 对 象 文本 标识 





法 也 可 以 调用 ObjectO 构 造 器 函数 ， 即 下 面 这 两 行 代 人 码 的 执行 结果 是 等 
价 的 : 

> var o= {}; 

> var 0 = new Object(); 

我 们 之 前 提 到 过 ， 所 谓 的 “ 空 ”对 象 ， 实 际 上 并 非 是 完全 无 用 的 ， 它 
还 是 包含 了 一 些 继承 来 的 方法 和 属性 的 。 在 本 书 中 ,“ 空 ”对 象 指 的 是 像 
{} 这 种 除 继承 来 的 属性 之 外 ， 不 含 任何 自身 属性 的 对 象 。 下 面 ， 我 们 吏 
带 您 来 看 看 之 前 所 创建 的 “ 空 ”对 象 o 中 的 部 分 属性 。 

o.constructor: 返回 构造 器 函数 的 引用 。 

o.toString(): 返回 对 象 的 描述 字符 串 。 

o.valueOf(): 返回 对 象 的 单 值 描 述 信息 ， 通 常 返 回 的 就 是 对 象 本 





下 面 ， 我 们 来 实际 应 用 一 下 这 些 方法 。 首 先 创建 一 个 对 象 : 

> var 0 = new Object(); 

然后 调用 toString0) 方 法 ， 返 回 该 对 象 的 描述 字符 串 : 

> o.toString(); 

"Lobject Object]" 

toStringO 方 法 会 在 茶 些 需要 用 字符 串 来 表示 对 象 的 时 候补 
JavaScript 内 部 调用 。 例 如 alert(0) 的 工作 就 需要 用 到 这 样 的 字符 串 。 所 
以 ， 如 果 我 们 将 对 象 传递 给 了 一 个 alert() 函 数 ，toString() 方 法 就 会 在 后 
台 锐 调用 ， 也 就 是 说 ， 下 面 两 行 代码 的 执行 结果 是 相同 的 : 


> alert(o); 











> alert(o.toString()); 

男 外 ， 字 符 串 连接 操作 也 会 使 用 字符 串 描 述 文本 ， 如 果 我 们 将 某 个 
对 象 与 字符 串 进行 连接 ， 那 么 该 对 象 就 先 调用 自身 的 toString() 方 法 : 

> "An object: " + 0; 


"An object: [object Object]" 


valueOf() 方 法 也 是 为 所 有 对 象 共 有 的 一 个 方法 。 对 于 简单 对 象 ( 即 
以 “Object0 为 构造 器 的 对 象 ) 来 说 ，valueOfO0 方 法 所 返回 的 就 是 对 象 自 


> o.valueOf() === 0; 

true 

总 而 言 之 : 

我 们 创建 对 象 时 既 可 以 用 var o = 他 的 形式 ( 即 执行 对 象 文本 标识 
法 ， 我 们 比较 推荐 这 种 方法 ) ， 也 可 以 用 var o = new Object(); 

无 论 是 多 复杂 的 对 象 ， 它 都 是 继承 自 Object 对 象 的 ， 并 且 拥 有 其 所 
有 的 方法 (例如 toString()) 和 属性 〈 例 如 constructor) 。 


4.2.2 Arra 


Array0 是 一 个 用 来 构建 数组 的 内 建构 造 器 函数 ， 例 如: 

> var a = new Array(); 

这 与 下 面 的 数组 文本 标识 法 是 等 效 的 : 

> var a= []; 

TEVE BAL ETAT AVE, BTA a HR a CE AS CR : 

> a[0] = 1; 

> al1] = 2; 

>a; 

[1, 2] 

当 我 们 使 用 Array() 构 造 嚣 创建 新 数组 时 ， 也 可 以 通过 传 值 的 方式 为 
其 设 定 元 素 。 

> var a = new Array(1,2,3,'four'); 

> al 

[1, 2, 3, "four"] 


%5, 


rh 
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博 况 ， 即 该 数值 会 被 认为 是 数组 的 长 度 。 


> var a2 = new Array(5); 

> a2; 

[undefined x 5] 

IRAH HAER REER, AS CE TD ek a BZA SE bs Ee 





STR ME? 的 确 如 此 ， 我 们 可 以 用 typeof 操 作 符 来 验证 一 下 : 


> typeof [1, 2, 3]; 


"object" 


由 于 数组 也 是 对 象 ， 那 么 就 说 明 它 也 继承 了 Object 的 所 有 方法 和 属 


> var a = [1, 2, 3, 'four']; 

> a.toString(); 

"1,2,3,four" 

> a.valueOf(); 

[1, 2, 3, "four"] 

> a.constructor; 

function Array(){ [native code] } 

尽管 数组 也 是 一 种 对 象 ， 但 还 是 有 一 些 特 殊 之 处 ， 因 为 : 
数组 的 属性 名 是 从 0 开始 递增 ， 并 上 自动 生成 数值 ; 

数组 拥有 一 个 用 于 记录 元 素数 量 的 length 属 性 ; 

数组 在 父 级 对 象 的 基础 上 扩展 了 更 多 额外 的 内 建 方法 。 
下 面 来 实际 验证 一 下 对 象 与 数组 之 间 的 区 别 ， 让 我 们 从 创建 空 对 象 








o 和 空 数组 a 开始 : 


> var a=[],o= {}; 


首先 ， 定 义 数 组 对 象 时 会 目 动 生成 一 个 length 属 性 。 而 这 在 一 般 对 


象 中 是 没有 的 : 


> a.length; 

0 

> typeof o.length; 

"undefined" 

在 为 数组 和 对 象 添 加 以 数字 或 非 数 字 为 键 名 的 属性 操作 上 ， 两 者 间 
并 没有 多 大 的 区 列 : 

> al0] = 1; 

> 0[0] = 1; 

> a.prop = 2; 

> O.prop = 2; 

length Jig VE iH E R Bt a BE A Je Ee E AS SIE 
键 名 属性 : 

> a.length; 

1 

我 们 也 可 以 手动 设置 length 属 性 。 如 果 设 置 的 值 大 于 当前 数组 中 元 
素数 量 ， 剩 下 的 那 部 分 会 被 自动 创建 〈 值 为 undefined) 的 空 元 素 所 填 
充 : 

> a.length = 5; 

5 

>a: 

[1, undefined x 4] 

而 如 果 我 们 设置 的 length 值 小 于 当前 元 素数 ， 多 出 的 那 部 分 元 系 将 
会 被 移 除 : 

> a.length = 2; 

2 

>a; 

[1, undefined x 1] 











一 些 数组 方法 

除了 从 父 级 对 象 那 里 继承 的 方法 以 外 ， 数 组 对 象 中 还 有 一 些 更 为 有 
用 的 方法 ， 例 如 sort()、join0 和 slice0) 等 (完整 的 方法 列表 见 附录 C: 内 
EIR) s 

下 面 ， 我 们 将 通过 一 个 数组 来 试验 一 下 这 些 方法 : 

> var a = [3, 5, 1, 7, 'test']; 

push0 方 法 会 在 数组 的 末 闪 添加 一 个 新 元 素 ， 而 pop(0 方 法 则 会 移 除 
最 后 一 个 元 素 ， 也 就 是 说 a.push("new") 就 相当 于 alalength] = "new", mi 
a.popO 则 与 alength-- 的 结果 相同 。 

另外 ，pushO 返 回 的 是 改变 后 的 数组 长 度 ， 而 pop 所 返回 的 则 是 被 移 
除 的 元 素 。 

> a.push(‘new’); 

6 

>a; 

[3, 5, 1, 7, "test", "new"] 

> a.pop(); 

"new" 

>a; 

[3, 5, 1, 7, "test"] 

而 ”sort(0) 方 法 则 是 用 于 给 数组 排序 的 ， 它 会 返回 排序 后 的 数组 ， 在 
下 面 的 示例 中 ， 排 序 完 成 后 ，a 和 b 所 指向 的 数组 是 相同 的 : 


> var b = a.sort(); 


> b; 

[1, 3, 5, 7, "test"] 
> a === b; 

true 
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字符 串 ， 我 们 可 以 通过 该 方法 的 参数 来 设 定 这 些 元 素 之 间 用 什么 字符 
CH) 连接 。 例 如 : 

> a.join( is not '); 

"1 is not 3 is not 5 is not 7 is not test" 

slice(0) 方 法 会 在 不 修改 目标 数组 的 情况 下 返回 其 中 的 某 个 片段 ， 该 
片段 的 首尾 索引 位 置 将 由 slice0 的 头 两 个 参数 来 指定 《都 以 0 为 基数 ) 。 

> b = a.slice(1, 3); 

[3, 5] 

> b = a.slice(0, 1); 

[1] 

> b = a.slice(0, 2); 

[1, 3] 

所 有 的 截取 完成 之 后 ， 原 数组 的 状态 不 变 : 

> al 

[1, 3, 5, 7, "test" 

splice() 则 是 会 修改 目标 数组 的 。 它 会 移 除 并 返回 指定 切片 ， 并 且 在 
可 选 情况 下 ， 它 还 会 用 指定 的 新 元 素来 填补 被 切除 的 空缺 。 该 方法 的 类 
两 个 参数 所 指定 的 是 要 移 除 切片 的 首尾 索引 位 置 ， 其 他 参数 则 用 于 填补 
的 新 元 素 值 。 

> b = a.splice(1, 2, 100, 101, 102); 

[3, 5] 

> al 

[1, 100, 101, 102, 7, "test" ] 

SK, MAPAIT oe EN, RAEE DA a eb: 

> a.splice(1, 3); 

[100, 101, 102] 


>a} 


[1, 7, "test" ] 


4.2.3 Function 








之 前 ， 我 们 已 经 了 解 了 函数 是 一 种 特殊 的 数据 类 型 ， 但 事实 还 远 不 
止 如 此 ， 它 实际 上 是 一 种 对 象 。 函 数 对 象 的 内 建构 造 器 是 Function()， 
你 可 以 将 它 作 为 创建 函数 的 一 种 备 选 方式 《〈 但 我 们 并 不 推荐 这 种 方 
I 

下 面 展 示 了 三 种 定义 函数 的 方式 : 

> function sum(a, b) { // function declaration 

return a + b; 
} 

> sum(1, 2); 

3 

> var sum = function(a, b) { // function expression 

return a + b; 

}; 

> sum(1, 2) 

3 

> sum(1, 2) 

3 

如 果 我 们 使 用 AY Function Hse eA WL A Zi BA WE BB É 
的 方式 来 设 定 函 数 的 参数 名 (通常 是 用 字符 串 〉 以 及 函数 体 中 的 代码 

(也 是 用 字符 串 〉。JavaScript 引擎 自 会 对 这 些 源 代码 进行 解析 印 ， 并 
dt 这 样 一 来 ， 就 会 带 来 与 eval0 相 似 的 缺点 。 因 此 我 们 
尽量 避免 使 用 Function0) 构 造 器 来 定义 函数 。 


如 果 您 一 定 想 用 Function(O) 构 造 器 来 创建 一 个 拥有 许多 参数 的 函 
可 了 解 一 点 : 这 些 参 数 可 以 是 一 个 由 如 号 分 割 而 成 的 单列 表 ， 所 
下 面 例子 中 的 这 些 函 数 定义 是 相同 的 : 
> var first = new Function( 
'a, b, c, d', 
‘return arguments;' 
); 
> first(1,2,3,4); 
[1, 2, 3, 4] 
> var second = new Function( 
'a, b,c’, 
'd', 
‘return arguments;' 
); 
> second(1,2,3,4); 
[1, 2, 3, 4] 


> var third = new Function( 


‘return arguments;' 
); 
> third(1,2,3,4); 


请 尽量 避免 使 用 Function(0) 构 造 器 。 因 为 它 与 eval0 和 setTimeonut() 


《天 于 该 函数 的 讨论 ， 我 们 稍 后 会 看 到 ) 一 样 ， 始 终 会 以 字符 串 的 形式 
通过 JavaScript 的 代码 检查 。 
4.2.3.1 函数 对 象 的 属性 
与 其 他 对 象 相同 的 是 ， 函 数 对 象 中 也 含有 名 为 constructor 的 属性 ， 
其 引用 的 就 是 Function0 这 个 构造 器 函数 。 
> function myfunc(a){ 
return a; 
} 
> myfunc.constructor; 
function Function(){[native code]} 
另外 ， 函 数 对 象 中 也 有 一 个 length 属 性 ， 用 于 记录 该 函数 声明 时 所 
决定 的 参数 数量 。 
> function myfunc(a, b, c){ 
return true; 
} 
> myfunc.length; 
3 
prototype 属 性 
prototype 属 性 是 JavaScript 中 使 用 得 最 为 广泛 的 函数 属性 。 我 们 将 会 
在 下 一 章 中 详细 介绍 它 ， 现 在 只 是 做 个 简单 说 明 : 
每 个 函数 的 prototype 属性 中 都 指向 了 一 个 对 象 ; 
它 只 有 在 该 函数 是 构造 器 时 才 会 发 挥 作用 ; 
该 函数 创建 的 所 有 对 象 都 会 持 有 一 个 该 prototype 属性 的 引用 ， 并 
可 以 将 其 当做 自身 的 属性 来 使 用 。 
下 面 ， 我 们 来 演示 一 下 prototype 属性 的 使 用 。 先 创建 一 个 简单 对 
象 ， 对 象 中 只 有 一 个 name 属 性 和 一 个 say() 方 法 : 


var ninja = { 








name: 'Ninja’, 
say: function(){ 


return 'I am a'+ this.name; 


} 

XA WAWER, KAE “se ee EAR BO 
函数 体 ) 中 都 会 有 一 个 prototype 属 性 ， 而 该 属性 会 指 疝 一 个 新 对 象 。 

> function FO{} 

> typeof F.prototype; 

"object" 

如 果 我 们 现在 对 该 prototype 属性 进行 修改 ， 就 会 发 生 一 些 有 趣 的 
变化 : 当前 默认 的 空 对 象 被 直接 瞪 换 成 了 其 他 对 象 。 下 面 我 们 将 变量 
ninja 赋值 给 这 个 prototype: 

> F.prototype = ninja; 

现在 ， 如 果 我 们 将 FO 当做 一 个 构造 器 函数 来 创建 对 象 baby_ninja， 
那么 新 对 象 baby_ninja 就 会 拥有 对 F.prototype 属 性 〈 也 就 是 ninja) 的 访问 
权 。 

> var baby_ninja = new F(); 

> baby_ninja.name; 

"Ninja" 

> baby_ninja.say(); 

"Tam a Ninja" 

KRY prototype ”属性 的 更 多 内 容 ， 我 们 将 会 在 后 续 章节 中 继续 讨 
论 。 实 际 上 下 一 整 章 都 是 与 此 相关 的 内 容 。 

4.2.3.2 函数 对 象 的 方法 

所 有 的 函数 对 象 都 是 继承 自 顶 级 父 对 象 Object 的 ， 因 此 它 也 拥有 
Object 对 象 的 方法 。 例 如 toString0。 当 我 们 对 一 个 函数 调用 toString(0) 方 





法 时 ， 上 所 得 到 的 就 是 该 函数 的 源 代 码 。 

> function myfunc(a, b, c) { 

return a + b + c; 

} 

> myfunc.toString(); 

"function myfunc(a, b, c) { 

"return a + b + c; 

yn 

Bi RRITE HIHI ARAA A ES A EAS A, LA Se 
得 到 一 个 毫 无 用 处 的 字符 串 [native code]. 

> parselnt.toString(); 





"function parseIntO {[native code]}" 

WEIL, BANTRY AH toString () es BOK IX. ay ASH Ty TBA EE TT 
R: 

toStringO 方 法 的 行为 与 运行 环境 有 关 ， 浏 览 堪 之 间 也 会 有 差异 ， 比 
如 空格 和 空 行 的 多 少 。 

4.2.3.3 call) Sapply() 

在 JavaScript 中 ， 每 个 函数 都 有 cal0 和 apply0O 两 个 方法 ， 您 可 以 用 它 
们 来 触发 函数 ， 并 指定 相关 的 调用 参数 。 

此 外 ， 这 两 个 方法 还 有 另外 一 个 功能 ， 它 可 以 让 一 个 对 象 去 “ 借 
用 ? 另 一 个 对 象 的 方法 ， 并 为 已 所 用 。 这 也 是 一 种 非常 简单 而 实用 的 代 
码 重 用 。 

下 面 我 们 定义 一 个 some_obj 对 象 ， 该 对 象 中 有 一 个 say0) 方 法 : 


var some_obj = { 





name: 'Ninja’, 
say: function(who){ 


return 'Haya'+ who + ', I am a' + this.name; 


ie 

这 样 一 来 ， 我 们 就 可 以 调用 该 对 象 的 say0) 方 法 ， 并 在 其 中 使 用 
this.name 来 访问 其 name 属 性 了 : 

> some_obj.say('Dude’); 

"Haya Dude, I am a Ninja" 

下 面 ， 我 们 再 创建 一 个 my_obj 对 象 ， 它 只 有 一 个 name 属 性 : 

> var my_obj = {name: 'Scripting guru'}; 

显然 ，some_obj 的 say0) 方 法 也 适用 于 my_obj， 因 此 我 们 希望 将 该 方 
法 当做 my_obj 自 吴 的 方法 来 调用 。 在 这 种 情况 下 ， 我 们 就 可 以 试 试 say(0) 
函数 中 的 对 象 方法 call0: 

> some_obj.say.call(my_obj, 'Dude'); 

"Haya Dude, I am a Scripting guru" 

成 功 了 ! 但 您 明日 这 是 怎么 回 事 吗 ?由 于 我 们 在 调用 say() 函 数 的 对 
象 方法 call0 时 传递 了 两 个 参数 : 对象 my_obj 和 字符 串 "Dude"。 这 样 一 
来 ， 当 say0 被 调用 时 ， 其 中 的 this 就 被 自动 设置 成 了 my_obj 对 象 的 引 
用 。 因 而 我 们 看 到 ，this.name 返 回 的 不 再 是 "Ninja"， 而 是 "Scripting 
guru" Y B, 

如 果 我 们 调用 call 方 法 时 需要 传递 更 多 的 参数 ， 可 以 在 后 面 依次 加 
KEAN: 

some_obj.someMethod.call(my_obj, ‘a’, 'b’, 'c’); 


另外 ， 如 果 我 们 没有 将 对 象 传递 给 call0 的 首 参 数 ， 或 者 传递 给 它 的 
是 null， 它 的 调用 对 象 将 会 被 默认 为 全 局 对 象 叫 。 

有 callO 基 本 相同 ， 的 不 同 之 处 在 于 参数 的 
传递 形式 ， 这 里 目标 函数 所 需要 的 参数 都 是 通过 一 个 数组 来 传递 。 所 
以 ， 下 面 两 行 代码 的 作用 是 等 效 的 ; 





some_obj.someMethod.apply(my_obj, ['a’, 'b', 'c']); 

some_obj.someMethod.call(my_obj, ‘a’, 'b’, 'c’); 

因而 ， 对 于 之 前 的 示例 ， 我 们 也 可 以 这 样 写 : 

> some_obj.say.apply(my_obj, ['Dude']); 

"Haya Dude, I am a Scripting guru" 

4.2.3.4 重新 认识 arguments 对 象 

在 上 一 章 中 ， 我 们 已 经 掌握 了 如 何在 一 个 函数 中 通过 arguments 来 
访问 传递 给 该 函数 所 需 的 全 部 参数 。 例 如 : 

> function f() { 

return arguments; 

} 

> £(1,2,3); 

[1, 2, 3] 

尽管 arguments 看 上 去 像 是 一 个 数组 ， 但 它 实 际 上 是 一 个 类 似 数 组 
的 对 象 。 它 和 数组 相似 是 因为 其 中 也 包含 了 索引 元 素 和 lengbh 属 性 。 但 
相似 之 处 也 就 到 此 为 止 了 ， 因 为 arguments 不 提供 一 些 像 sort()、slice() 这 
样 的 数组 方法 。 

但 我 们 可 以 把 arguments 转 换 成 数组 ， 这 样 束 可 以 对 它 使 用 各 种 各 样 
的 数组 方法 了 。 在 下 面 这 个 例子 中 ， 我 们 用 刚 学 到 的 call0 方 法 做 到 了 这 
点 ， 











> function f(){ 
var args = [].slice.call(arguments); 
return args.reverse(); 
} 
> £(1,2,3,4); 
[4,3,2,1] 
WEA, TABOR ETE PS A], PEHEA slice 属 


性 。 当 然 ， 您 也 可 以 通过 Array.prototype.slice 来 调用 同一 个 函数 。 

4.2.3.5 推断 对 象 类 型 

之 前 ， 我 们 已 经 介绍 过 arguments 对 象 跟 数 组 之 间 的 不 同 之 处 。 但 
二 者 之 间 有 具体 应 该 如 何 区 分 呢 ? 或 者 我 们 换 一 种 问 法 : 既然 数组 的 
typeof 返回 值 也 为 "object"， 那 么 要 如 何 区 分 对 象 与 数组 呢 ? 

答案 是 使 用 Object 对 象 的 toString0 方 法 。 这 个 方法 会 返回 所 创建 对 
象 的 内 部 类 名 。 

> Object.prototype.toString.call({ }); 

"[object Object]" 

> Object.prototype.toString.call([]); 





"[object Array]" 

在 这 里 ，toString(0) 方 法 必须 要 来 自 于 Object 构造 器 的 prototype 属 
性 。 直 接 调 用 Array 的 toStringO 方 法 是 不 行 的 ， 因 为 在 Array 对 象 中 。 这 
个 方法 已 经 出 于 其 他 目的 被 重 写 了 : 

> [1, 2, 3].toString(); 

"1,2,3" 

也 可 以 写 为 : 

> Array.prototype.toString.call([1, 2, 3]); 

"2 

下 面 我 们 来 做 一 些 更 有 趣 的 尝试 。 您 也 可 以 单独 为 
Object.prototype.toString 设 置 一 个 引用 变量 ， 以 便 让 代码 显得 更 简短 一 
些 : 





> var toStr = Object.prototype.toString; 
如 果 您 用 这 个 方法 调用 arguments， 很 快 就 能 发 现 它 与 Array 之 间 的 


> (function () { 


return toStr.call(arguments); 


1); 

"Lobject Arguments |" 

同样 ， 这 个 方法 也 适用 于 DOM 元 素 : 
> toStr.call(document.body); 

"[object HTMLBodyElement]" 


4.2.4 Boolean 


下 面 继续 我 们 的 JavaScript 内 建 对 象 之 旅 。 接 下 来 要 介绍 的 对 象 相对 
来 说 束 简 和 单 多 了 ， 它 们 不 过 是 一 些 基本 数据 类 型 的 封装 ， 主 要 包括 
Boolean、Number、String 等 。 

在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 中 ， 我 们 已 经 
学 习 了 大 量 关 于 Boolean 类 型 的 应 用 。 在 这 里 ， 我 们 要 介绍 的 是 与 
Boolean() 构 造 器 相关 的 内 容 。 

> var b = new Boolean(); 

在 这 里 最 重要 的 一 点 是 ， 我 们 必须 明白 这 里 所 新 创建 的 b 是 一 个 对 
象 ， 而 不 是 一 个 基本 数据 类 型 的 布尔 值 。 如 果 想 将 b 转换 成 基本 数据 类 
型 的 布尔 值 ， 我 们 可 以 调用 它 的 valueOfO 方 法 〈 继 承 自 Object 对 象 ) 。 


> var b = new Boolean(); 




















> typeof b; 

"object" 

> typeof b.valueOf(); 

"boolean" 

> b.valueOf(); 

false 

总 体 而 言 ， 用 ”Boolean() 构 造 器 所 创建 的 对 象 并 没有 多 少 实用 性 ， 
因为 它 并 没有 提供 来 自 父 级 对 象 以 外 的 任何 方法 和 属性 。 





不 使 用 new 操 作 符 而 单独 作为 一 般 函 数 使 用 时 ，Boolean() 可 以 将 一 
些 非 布尔 值 转换 为 布尔 值 〈 其 效果 相当 于 进行 两 次 取 反 操 
YE: !lvalue) 。 

> Boolean("test"); 

true 

> Boolean(""); 

false 

> Boolean({ }); 


true 


而 且 ， 在 JavaScript 中 ， 除 了 那 六 种 falsy 值 外 ， 其 他 所 有 的 都 属于 


truthy (#6), ， 其 中 也 包括 所 有 的 对 象 。 这 就 意味 着 所 有 由 new Boolean() 
语句 创建 的 布尔 对 象 都 等 于 true， 因 为 它们 都 是 对 象 。 


> Boolean(new Boolean(false) ); 





true 
这 种 情况 确实 很 容易 让 人 混 消 。 而 且 考 虑 到 Boolean 对 象 中 并 没有 
很 特别 的 方法 ， 我 们 建议 您 最 好 还 是 一 直 使 用 基本 类 型 来 表示 布尔 值 比 


4.2.5 Number 


Number0O 函 数 的 用 法 与 Boolean0 类 似 ， 即 : 

O 在 被 当做 构造 器 函数 时 〈 即 用 于 new 操 作 符 〉， 它 会 创建 一 个 对 
象 ; 

+ 在 被 当做 一 般 函 数 时 ， 它 会 试图 将 任何 值 转换 为 数字 ， 这 与 
parseIntO 或 parseFloatO 起 到 的 作用 基本 相同 。 

> var n= Number('12.12"); 


>n; 


12.12 

> typeof n; 

"number" 

> var n = new Number('12.12'); 

> typeof n; 

"object" 

由 于 函数 本 映 也 是 对 象 ， 所 以 会 拥有 一 些 属性 。 在 Number() 函 数 
中 ， 有 一 些 内 置 属性 是 值得 我 们 注意 的 《它们 是 不 可 更 改 的 〉: 

> Number.MAX VALUE; 

1.7976931348623157e+308 

> Number.MIN_VALUE; 

De-324 

> Number.POSITIVE_INFINITY; 





Infinity 

> Number.NEGATIVE_INFINITY; 

-Infinity 

> Number.NaN; 

NaN 

此 外 ，Number 对 象 中 还 提供 了 三 个 方法 ， 它 们 分 别 是 : toFixed()、 
toPrecision() 和 toExponential()〔 详 细 内 容 见 附录 C: 内 建 对 象 ) 。 

> var n = new Number(123.456); 

> n.toFixed(1); 

"123.5" 

需要 注意 的 是 ， 你 可 以 在 事先 未 创建 Number 对 象 的 情况 下 使 用 这 
些 方法 。 在 这 些 例 子 中 ，Number 对 象 均 在 后 台 完 成 创建 和 销毁 : 

> (12345).to Exponential(); 

> "1.2345e+4" 





与 所 有 的 对 象 一 样 ，Number 对 象 也 提供 了 自己 的 toString0 方 法 。 但 
值得 注意 的 是 ， 该 对 象 的 toString() 方 法 有 一 个 可 选 的 radix 人 参数 〈 它 的 默 
认 值 是 10) 。 


> var n = new Number(255); 





> n.toString(); 
"255" 

> n.toString(10); 
"255" 

> n.toString(16); 
"ff" 

> (3).toString(2); 
"4q" 

> (3).toString(10); 
"gm 


4.2.6 String 


同样 ， 我 们 可 以 通过 String0 构 造 占 函数 来 新 建 String 对 象 。 该 对 象 
为 我 们 提供 了 一 系列 用 于 文本 操作 的 方法 ， 但 您 最 好 还 是 使 用 基本 的 字 
从 串 类 型 。 

下 面 ， 我 们 通过 一 个 示例 来 看 看 String 对 象 与 基本 的 字符 串 类 型 之 
间 有 什么 区 别 。 


> var primitive = 'Hello'; 








> typeof primitive; 
"string" 
> var obj = new String('world’); 


> typeof obj; 


"object" 

String 对 象 实际 上 就 像 是 一 个 字符 数组 ， 其 中 也 包括 用 于 每 个 字符 
的 索引 属性 《虽然 这 个 特性 在 ES5 开 始 才 引 入 ， 但 早已 被 各 大 浏览 器 文 
持 ， 除 了 早期 版 本 的 正 ) ， 以 及 整体 的 length 属 性 。 

> obj[0]; 

"y" 

> obj[4]; 

"q" 

> obj.length; 

5 

如 果 我 们 想 获 得 String ”对象 的 基本 类 型 值 ， 可 以 调用 该 对 象 的 
valueOfO 或 toString(0) 方 法 〈 都 继承 目 Object 对 象 ) 。 不 过 您 可 能 很 少 有 
机 会 这 么 做 ， 因 为 在 很 多 场景 中 ，String 对 象 都 会 被 自动 转换 为 基本 类 
型 的 字符 串 。 

> obj.valueOf(); 

"world" 

> obj.toString(); 


"world" 





而 基本 类 型 的 字符 串 就 不 是 对 象 了 ， 因 此 它们 不 含有 任何 属性 和 方 
法 。 但 JavaScript 还 是 为 我 们 提供 了 一 些 将 基本 字符 串 类 型 转换 为 String 
对 象 的 语法 (就 像 我 们 之 前 转换 基本 类 型 的 数字 一 样 )。 

例如 在 下 面 的 示例 中 ， 当 我 们 将 一 个 基本 字符 串 当 做 对 象 来 使 用 
时 ， 后 台 束 会 相应 的 创建 String 对 象 ， 在 调用 完 之 后 叉 把 String 对 象 给 芯 
即 销毁 。 

> "potato" length; 





Te 


6 

> "tomato"[0]; 

mr 

> "potato"["potatoes".length - 1]; 

"on 

最 后 我 们 再 来 看 一 个 说 明基 本 字符 串 与 String 对 象 之 间 区 别 的 例 
当 它 们 被 转换 成 布尔 值 时 ， 尺 管 空 字符 串 属于 falsy 值 ， 但 所 有 的 








String 对 象 都 是 truthy 值 (因为 所 有 的 对 象 都 是 truthy 值 〉。 


> Boolean(""); 
false 
> Boolean(new String("")); 


true 


与 Number() 和 Boolean() 类 似 ， 如 果 我 们 不 通过 new 操 作 符 来 调用 


String0， 它 就 会 试图 将 其 参数 转换 为 一 个 基本 字符 串 。 


TK 


> String(1); 
Meet 
如 果 其 参数 是 一 个 对 象 的 话 ， 这 就 等 于 调用 该 对 象 的 toString() 方 


> String({p: 1}); 
"Lobject Object]" 
> String({1,2,3]); 
"23 
> String([1, 2, 3]) === [1, 2, 3].toString(); 
true 
String 对 象 的 一 些 方法 
下 面 ， 让 我 们 来 示范 一 下 部 分 String 对 象 方法 的 调用 〈 如 果 想 获得 


完整 的 方法 列表 ， 可 以 参考 附录 C: 内 建 对 象 ) 。 


首先 从 新 建 String 对 象 开 始 ; 
> var s = new String("Couch potato"); 
接 下 来 是 用 于 字符 串 大 小 写 转换 的 方法 ，toUpperCase() 与 


toLowerCase(): 





> s.toUpperCase(); 

"COUCH POTATO" 

> s.toLowerCase(); 

"couch potato" 

charAt() 方 法 返回 的 是 我 们 指定 位 置 的 字符 ， 这 与 中 括号 的 作用 相 
当 【〈 字 符 串 本 喘 就 是 一 个 字符 数组 ) 。 
> s.charAt(0); 
"C" 

> s[0]; 

"C" 

如 果 我 们 传递 给 charAt0 方 法 的 位 置 并 不 存在 ， 它 就 会 返回 一 个 空 
FRE: 

> s.charAt(101); 





indexOfO 方 法 可 以 帮助 我 们 实现 字符 串 内 部 搜索 ， 该 方法 在 遇 到 匹 
配 字 符 时 会 返回 第 一 次 匹配 位 置 的 索引 值 。 由 于 该 索引 值 是 从 0 开始 计 
数 的 ， 所 以 字符 串 "Couch" 中 第 二 个 字符 "o" 的 索引 值 为 1。 

> s.indexOf('o'); 

1 

另外 ， 我 们 也 可 以 通过 可 选 参数 指定 搜索 开始 的 位 置 《〈 以 索引 值 的 
形式 ) 。 例 如 下 面 押 找到 的 融 是 字符 串 中 的 第 二 个 "o"， 因 为 我 们 指定 
的 搜索 是 从 索引 2 处 开始 的 。 

> s.indexOf('o’, 2); 








7 

如 果 我 们 想 让 搜索 从 字符 串 的 末端 开始 ， 可 以 调用 lastIndexOf() 方 
法 《但 返回 的 索引 值 仍然 是 从 前 到 后 计数 的 ) 。 

> s.lastIndexOf('o'); 

11 

当然 ， 上 述 方法 的 搜索 对 象 不 仅仅 局 限于 字符 ， 也 可 以 用 于 字符 串 
搜索 。 并 且 搜 索 是 区 分 大 小 写 的 。 

> s.indexOf('Couch’); 

0 

如 果 方 法 找 不 到 匹配 对 象 ， 返 回 的 位 置 索 引 值 就 为 -1: 

> S.indexOf(couch ); 

-1 

如 果 我 们 想 进行 一 次 大 小 写 无 关 的 搜索 ， 可 以 将 字符 串 转换 为 小 写 
后 再 执行 搜索 : 

> s.toLowerCase().indexOf(‘couch’); 

0 

如 果 相 关 的 搜索 方法 返回 的 索引 值 是 0， 束 说 明 字 符 串 的 匹配 部 分 
是 从 0 处 开始 的 。 这 有 可 能 会 给 if 语 句 的 使 用 市 来 某 些 混淆 因素 ， 当 我 们 
像 下 面 这 样 使 用 让 语句 ， 就 会 将 索引 值 0 隐 式 地 转换 为 布尔 值 false， 虽 然 
这 种 写法 没有 什么 语法 错误 ， 但 在 逻辑 上 却 完全 错 了 : 

if (s.indexOf('Couch’)) {...} 

正确 的 做 法 是 : 当 我 们 用 if 语句 检测 一 个 字符 串 中 是 否 包 含 男 一 个 
字符 串 时 ， 可 以 用 数字 -1 来 做 indexOfO 结 果 的 比较 参照 : 

if (s.indexOf('Couch’) !== -1) {...} 

接 下 来 ， 我 们 要 介绍 的 是 slice() 和 substring()， 这 两 个 方法 都 可 以 用 
于 返回 目标 字符 串 中 指定 的 区 间 : 

> s.slice(1, 5); 




















"ouch" 

> s.substring(1, 5); 

"ouch" 

需要 提醒 的 是 ， 这 两 个 方法 的 第 二 个 参数 所 指定 的 都 是 区 间 的 末端 
位 置 ， 而 不 是 该 区 间 的 长 度 。 这 两 个 方法 的 不 同 之 处 在 于 对 负 值 参数 的 
处 理 方 式 ，substring() 方 法 会 将 负 值 视 为 0， 而 slice0 方 法 则 会 将 它 与 字 
符 捉 的 长 上 度 相 加 。 因 此 ， 如 果 我 们 传 给 它们 的 参数 是 (1,-1) 的 话 ， 它 们 
的 实际 情况 分 别 是 substring(1, 0) 和 slice(1,s.length-1): 


> s.slice(1, -1); 





"ouch potat" 

> s.substring(1, -1); 

ncn 

还 有 一 个 方法 叫 substr0， 但 由 于 它 不 在 JavaScript 的 标准 中 ， 所 以 
您 应 该 尽量 用 substring0 去 代替 它 。 

splitO 方 法 可 以 根据 我 们 所 传递 的 分 割 字 符 串 ， 将 目标 字符 串 分 害 
成 一 个 数组 。 例 如 : 


> s.split(" "); 


二 


["Couch", "potato"] 

split0) 是 join0 的 反 操作 ， 后 者 则 会 将 一 个 数组 合并 成 一 个 字符 串 。 
例如 : 

> s.split(' ').join(' '); 





"Couch potato" 

concat() 方 法 通常 用 于 合并 字符 串 ， 它 的 功能 与 基本 字符 串 类 型 的 
+ 操作 符 类 似 : 

> s.concat("es"); 


"Couch potatoes" 


需要 注意 的 是 ， 到 目前 为 止 ， 我们 所 讨论 的 方法 返回 的 部 是 一 个 新 





的 基本 字符 串 ， 它 们 所 做 的 任何 修改 都 不 会 改动 源 字符 串 。 所 有 的 方法 
调用 都 不 会 影响 原始 字符 串 的 值 。 


> s.valueOf(); 





"Couch potato" 

通常 情况 下 ， 我 们 会 用 indexOf() 和 lastIndexOf() 方 法 进行 字符 串 内 
搜索 ， 但 除 此 之 外 还 有 一 些 功能 更 为 强大 的 方法 〈 如 search()、 
matchO、replace0 等 ) ， 它 们 可 以 以 正则 表达 式 为 参数 来 执行 搜索 任 
务 。 关 于 正则 表达 式 ， 我 们 将 会 在 稍 后 的 RegExpO 构 造 器 函数 介绍 中 加 
以 详细 讨论 。 

现在 ， 数 据 封 装 类 对 象 已 经 全 部 介绍 完了 ， 接 下 来 ， 我 们 要 介绍 一 
些 工具 类 对 象 ， 和 它们 分别 是 Math、Date 和 RegExp。 


4.2.7 Math 


Math 与 我 们 之 前 所 见 过 的 其 他 全 局 内 建 对 象 是 有 些 区 别 的 。Math 
对 象 不 是 函数 对 象 ， 所 以 我 们 不 能 对 它 调用 new 操作 符 ， 以 创建 别 的 对 
象 。 实 际 上 ，Math 只 是 一 个 包含 一 系列 方法 和 属性 、 用 于 数学 计算 的 
全 局 内 建 对 象 。 
Math 的 属性 都 是 一 些 不 可 修改 的 常数 ， 因 此 它们 都 以 名 字 大 写 的 方 
式 来 表示 上 自己 与 一 般 属性 变量 的 不 同 ( 这 类 似 于 Number(0 构 造 右 的 常数 
属性 ) 。 下 面 就 让 我 们 来 看 看 这 些 属 性 。 
数字 常数 nn: 
> Math.PI; 
3.141592653589793 
2 的 平方 根 : 
> Math.SQRT?: 
1.4142135623730951 











欧 拉 常 数 e: A 

> Math.E; 
2.718281828459045 

2 的 自然 对 数 : 

> Math.LN2; 
0.6931471805599453 

10 的 自然 对 数 : 

> Math.LN10; 
2.302585092994046 

现在 ， 您 知道 下 次 该 如 何 忽悠 朋友 们 了 吧 ? 无 论 出 于 怎么 样 的 炮 
爷 理 由 ) 当 他 们 开始 使 劲 回想 诸如 “e 的 值 是 什么 ?我 怎么 忘记 了 ”时 ， 
我 们 只 需要 轻松 地 在 控制 台中 输入 Math.E， 就 会 立即 得 到 答案 。 

接 下 来 ， 我 们 再 来 看 看 Math 对 象 押 提供 的 一 些 方法 〈 完 整 的 方法 
列表 请 见 附录 C: 内 建 对 象 ) 。 

首先 是 生成 随机 数 : 

> Math.random(); 

0.3649461670235814 

random() 所 返回 的 是 0 到 1 之 间 的 某 个 数 ， 所 以 如 果 我 们 想 要 获得 0 
到 100 之 间 的 某 个 数 的 话 ， 束 可 以 这 样 : 

> 100 * Math.random(); 

如 果 我 们 需要 获取 的 是 某 max 和 min 之 间 的 值 ， 可 以 通过 一 个 公式 
((max - min) *Math.random()) + min 来 获取 ， 例 如 ， 我 们 想 获 取 的 是 2 到 
10 之 间 的 某 个 数 ， 就 可 以 这 样 : 

>8* Math.random() + 2; 

9.175650496668485 

如 有 果 这 里 需要 的 是 一 个 整数 的 话 ， 您 可 以 调用 以 下 取 整 方法 。 








floor): 取 小 于 或 等 于 指定 值 的 最 大 整数 。 

ceil): 取 大 于 或 等 于 指定 值 的 最 小 整数 。 

round(): 取 最 靠近 指定 值 的 整数 。 

例如 ， 下 面 的 执行 结果 不 是 0 就 是 1: 

> Math.round(Math.random()); 

如 果 我 们 想 获 得 一 个 数字 集合 中 的 最 大 值 或 最 小 值 ， 则 可 以 调用 
max0 和 min0 方 法 。 所 以 ， 当 我 们 在 一 个 表单 中 需要 一 个 合法 的 月 份 值 
时 ， 可 以 用 下 面 的 方式 来 确保 相关 的 数据 能 正常 工作 : 

> Math.min(Math.max(1, input), 12); 

除 此 之 外 ，Math 对 象 还 提供 了 一 些 用 于 执行 数学 计算 的 方法 ， 这 些 
计算 是 我 们 不 需要 去 专门 设计 即 可 使 用 的 。 这 意味 着 当 我 们 想 要 执行 指 
数 运 算 时 只 需要 调用 pow0 方 法 即 可 ， 而 求 平 方 根 时 只 需要 调用 sqrt()， 
男 外 还 包括 所 有 的 三 角 函 数 计算 一 一 sin()、cos()、atan() 等 。 

例如 ， 求 2 的 8 次 方 : 

> Math.pow(2, 8); 

256 

求 9 的 平方 根 : 

> Math.sqrt(9); 

3 


























4.2.8 Date 


Date() 是 用 于 创建 Date 对 象 的 构造 器 函数 ， 我 们 在 用 它 创 建 对 象 时 
可 以 传递 以 下 几 种 参数 。 

无 参数 〈 默 认为 当天 的 日 期 ) 。 

一 个 用 于 表现 日 期 的 字符 串 。 

分 开 传递 的 日 、 月 、 时 间 等 值 。 


一 个 timestamp (fi. Ll 

下 面 是 一 个 表示 当天 日 期 和 时 间 的 对 象 示 例 : 

> new Date(); 

Wed Feb 27 2013 23:49:28 GMT-0800 (PST) 

控制 台 显 示 了 Date 对象 的 ”toString0 结 果 ， 因 此 这 里 的 长 字符 
"Wed Feb 27 2013 23:49:28 GMT-0800 (PST)" 实 际 上 就 是 这 个 Date 对 
象 的 字符 串 表 述 。 

接 下 来 ， 我 们 看 一 些 用 字符 串 初 始 化 Date 对 象 的 示例 ， 请 注音 它 
们 各 上 自 不 同 的 格式 以 及 所 指定 的 时 间 。 

> new Date('2015 11 12; 

Thu Nov 12 2015 00:00:00 GMT-0800 (PST) 

> new Date('1 1 2016'); 

Fri Jan 01 2016 00:00:00 GMT-0800 (PST) 

> new Date('1 mar 2016 5:30; 

Tue Mar 01 2016 05:30:00 GMT-0800 (PST) 

Date Hitas P] ARES oA A FB HARRA, (Bn 
要 定义 一 个 精确 的 日 期 ， 例 如 将 用 户 输入 直接 传递 给 Date 构造 器 ， 这 
样 做 显然 不 够 可 靠 。 更 好 的 选择 是 同 Date0 构 造 右 传递 一 些 具 体 的 数 
值 ， 其 中 包括 : 

年 份 ; 

Att: MO (1 月 ) 到 11 (12 AD ; 

日 期 : 从 1 #131; 

时 数 : 从 0 到 23; 

分 钟 : 从 0 到 59; 

秒 钟 : 从 0 到 59; 

“EME: 从 0 到 999。 





现在 让 我 们 来 看 一 些 具体 示例 。 

如 果 我 们 传递 所 有 参数 : 

> new Date(2015, 0, 1, 17, 05, 03, 120); 

Tue Jan 01 2015 17:05:03 GMT-0800 (PST) 

如 采 只 传递 日 期 和 时 钟 值 : 

> new Date(2015, 0, 1, 17); 

Tue Jan 01 2015 17:00:00 GMT-0800 (PST) 

在 这 里 ， 我 们 需要 注意 一 件 事 ， 由 于 月 份 是 从 0 开始 的 ， 所 以 这 里 
的 1 指 的 是 2 月 : 

> new Date(2016, 1, 28); 

Sun Feb 28 2016 00:00:00 GMT-0800 (PST) 

如 果 我 们 所 传递 的 值 越过 了 被 允许 的 范围 ，Date 对 象 会 自行 启 
动 * 溢 出 式 ” 前 进 处 理 。 例 如 ， 由 于 2016 年 2 月 不 存在 30 日 这 一 天 ， 所 以 
它 会 自动 解释 为 该 年 的 3 月 1 日 〈2016 年 为 半年 ) 。 

> new Date(2016, 1, 29); 

Mon Feb 29 2016 00:00:00 GMT-0800 (PST) 

> new Date(2016, 1, 30); 

Tue Mar 01 2016 00:00:00 GMT-0800 (PST) 

类 似 地 ， 如 果 我 们 传递 的 是 12 月 32 日 ， 就 会 被 自动 解释 为 来 年 的 1 
月 1 日 : 

> new Date(2012, 11, 31); 

Mon Dec 31 2012 00:00:00 GMT-0800 (PST) 

> new Date(2012, 11, 32); 

Tue Jan 01 2013 00:00:00 GMT-0800 (PST) 

最 后 ， 我 们 也 可 以 通过 timestamp 的 方式 来 初始 化 一 个 Date 对 象 OX 
是 一 个 以 蝇 秒 为 单位 的 UNIX 纪 元 方式 ， 开 始 于 1970 年 1 月 1 日 ) 。 

> new Date(1357027200000); 


Tue Jan 01 2013 00:00:00 GMT-0800 (PST) 
如 果 我 们 在 调用 Date0 时 没有 使 用 new 操 作 符 ， 那 么 无 论 是 否 传递 


了 参数 ， 所 得 字符 串 的 内 容 始终 都 将 是 当前 的 日 期 和 时 间 《 就 像 下 面 示 
例 所 运行 的 那样 ) : 


> Date(); 

Wed Feb 27 2013 23:51:46 GMT-0800 (PST) 

> Date(1, 2, 3, "it doesn't matter"); 

Wed Feb 27 2013 23:51:52 GMT-0800 (PST) 

> typeof Date(); 

"string" 

> typeof new Date(); 

"object" 

Date 对 象 的 方法 

一 旦 我 们 创建 了 Date 对 象 ， 就 可 以 调用 该 对 象 中 的 许多 方法 。 其 


中 使 用 最 多 的 都 是 一 些 名 为 set*() 或 get*() 的 方法 ， 例 如 getMonth()、 
setMonth()、getHours()、setHours() 等 等 。 下 面 我 们 来 看 一 些 具体 的 示 


例 。 


首先 ， 新 建 一 个 Date 对 象 : 

> var d = new Date(2015, 1, 1); 

> d.toString(); 

Sun Feb 01 2015 00:00:00 GMT-0800 (PST) 

然后 ， 将 其 月 份 设 置 成 3 月 〈 记 住 ， 月 份 数 是 从 0 开始 的 ) : 
> d.SetMonth(2); 

1425196800000 

> d.toString(); 

Sun Mar 01 2015 00:00:00 GMT-0800 (PST) 

接着 ， 我 们 读 取 月 份 数 : 


> d.getMonth(); 

2 

除了 这 些 实例 方法 以 外 ，Date() 函 数 / 对 象 中 还 有 另外 两 个 方法 

CESS 中 又 新 增 了 一 个 ) 。 这 两 个 属性 不 需要 在 实例 化 情况 下 使 用 ， 工 
作 方 式 与 Math 的 方法 基本 相同 。 在 基于 class 概 念 的 程序 设计 语言 中 ， 它 
们 往往 被 称 之 为 "静态 "方法 ， 因 为 它们 的 调用 不 需要 依托 对 象 实例 。 

例如 ，Date.parse() 方 法 会 将 其 所 接收 的 字符 串 转 换 成 相应 的 
timestamp 格 式 ， 并 返回 : 

> Date.parse(Jan 11, 2018’); 

1515657600000 

而 Date.UTC0O 方 法 则 可 以 接受 包括 年 份 、 月 份 、 日 期 等 在 内 的 所 有 
参数 ， 并 以 此 产生 一 个 相应 的 、 符 合格 林 尼 治 时 标准 的 timestamp 值 : 

> Date.UTC(2018, 0, 11); 

1515628800000 

由 于 用 Date 创建 对 象 时 可 以 接受 一 个 timestamp 参数 ， 因 此 我 们 也 
可 以 直接 将 Date.UTCO 的 结果 传递 给 该 构造 器 。 在 下 面 的 示例 中 ， 我 们 
演示 了 如 何在 新 建 Date 对 象 的 过 程 中 ， 将 UTCO 返 回 的 格林 尼 治 时 间 转 
换 为 本 地 时 间 : 

> new Date(Date.UTC(2018, 0, 11)); 

Wed Jan 10 2018 16:00:00 GMT-0800 (PST) 

> new Date(2018, 0, 11); 

Thu Jan 11 2018 00:00:00 GMT-0800 (PST) 

此 外 ，ES5 还 为 Date 构 造 器 新 增 了 now0 方 法 ， 以 用 于 返回 当前 
timestamp。 比 起 在 ES3 中 对 着 一 个 Date 对 象 调用 getTime() 方 法 而 言 ， 这 
种 新 方法 显然 更 为 简洁 。 

> Date.now(); 


1362038353044 








> Date.now() === new Date().getTime(); 

true 

您 可 以 认为 ， 日 期 的 内 部 表达 形式 就 是 一 个 整数 类 型 的 
timestamp， 而 它 的 其 他 表达 形式 只 不 过 是 这 种 内 部 形式 的 “糖衣 ”。 这 人 么 
一 来 ， 我 们 束 很 容易 理解 为 什么 Date 对 象 的 valueOfO 返 回 的 是 一 个 
timestamp 数 据 : 

> new Date().valueOf(); 

1362418306432 

而 将 Date 转 换 为 整 型 则 只 需要 一 个 + 号 : 

> + new Date(); 

1362418318311 

例子 : 计算 生日 

下 面 ， 我 们 再 来 看 最 后 一 个 关于 Date 对 象 的 工作 示例 。 假 如 ， 我 
很 好 奇 自己 2016 年 的 生日 (6 月 20 日 〉 是 星期 几 ， 就 可 以 这 样 : 

> var d = new Date(2016, 5, 20); 

> d.getDay(); 

1 

由 于 星期 数 是 从 0《〈 星 期 日 ) 开始 计数 的 ， 因 此 ，1 应 该 代表 了 星期 
一 。 我 们 来 验证 一 下 : 

> d.toDateString(); 

"Mon Jun 20 2016" 

好 吧 ， 星 期 一 是 不 错 ， 但 那 显然 不 是 一 个 搞 派 对 的 最 佳 日 子 。 接 下 
来 我 要 和 弄 一 个 循环 ， 看 看 从 2016 年 到 3016 年 有 多 少 个 6 月 20 日 是 星期 
一 ， 并 碍 看 一 下 这 些 日 子 在 一 周 当中 的 分 布 情况 〈 嗯 ， 毕 竟 计 算 机 技术 
这 么 发 达 ， 哪 天 DNA 就 被 黑客 入 侵 了 ， 相 信 大 家 到 了 3016 年 还 是 会 精神 
ELBA) 。 

首先 ， 我 们 来 初始 化 一 个 包含 七 个 元 素 的 数组 ， 每 个 元 素 都 分 别 对 

















应 着 一 周 中 的 一 天 ， 以 充当 计数 器 。 也 就 是 说 ， 在 循环 到 3016 年 的 过 程 
中 ， 我 们 将 会 根据 执行 情况 递增 相关 的 计数 堪 : 

var stats = [0,0,0,0,0,0,0]; 

接 下 来 就 是 该 循环 的 实现 : 

for (var i = 2016; i < 3016; i++) { 

stats[new Date(i, 5, 20).getDay(Q)]++; 

} 

然后 ， 我 们 来 看 看 结果 : 

> stats; 

[140, 146, 140, 145, 142, 142, 145] 

哇 哦 ! 有 142 个 星期 五 和 145 个 星期 六 ， 不 错 不 错 ! 





4.2.9 RegExp 


正则 表达 式 (regular expression) 提供 了 一 种 强大 的 文本 搜索 和 处 
理 方式 。 对 于 正则 表达 式 ， 不 同 的 语言 有 着 不 同 的 实现 〈 就 像 * 方 
言 >) ，JavaScript 所 采用 的 是 Perl 5 的 语法 。 

另外 ， 为 简便 起 见 ， 人 们 经 第 会 将 regular expression 缩 写成 regex 或 
者 regexp。 

一 个 正则 表达 式 通 常 由 以 下 部 分 组 成 。 

一 个 用 于 匹配 的 模式 文本 。 

用 0 个 或 多 个 修饰 符 《〈 也 叫做 标志 ) 描述 的 匹配 模式 细节 。 

该 匹配 模式 也 可 以 是 简单 的 全 字符 文本 ， 但 这 种 情况 极 少 ， 而 且 此 
时 我 们 多 半 会 使 用 indexOf() 这 样 的 方法 ， 而 很 少 会 用 到 正则 表达 式 。 在 
大 多 数 情况 下 ， 匹 配 模式 往往 都 要 更 为 复杂 ， 也 更 难以 理解 。 事 实 上 ， 
掌握 正则 表达 式 是 一 个 很 大 的 问题 ， 我 们 也 不 打算 在 这 里 详细 讨论 它 
们 。 接 下 来 ， 我 们 只 会 介绍 它 在 JavaScript 中 的 语法 ， 以 及 可 用 于 正则 


表达 式 的 对 象 和 方法 。 另 外 ， 我 们 还 在 附录 D: 正则 表达 式 中 提供 了 一 
份 完整 的 匹配 模式 写法 指南 ， 以 供 读 者 参考 。 

在 JavaScript 中 ， 我 们 通常 会 利用 内 建构 造 右 RegExp0) 来 创建 正则 表 
达 式 对 象 ， 例 如 : 

> var re = new RegExp("j.*t"); 

另外 ，RegExp ”对 象 还 有 一 种 更 为 简便 的 正则 文本 标记 法 Cregex 
literal notation) : 

> var re = /j.*t/; 

FE EN al, “jt ae BAT AWA EURIAREN. FLAS 
a te: “PLFA DATA, ERFIR, AP Se FEZ la Ay 
含 1 个 或 多 个 字符 。” 其 中 的 * 号 的 意思 就 是 “0 个 或 多 个 单元 ”， 而 这 里 的 
点 号 〈.) 所 表示 的 是 “任意 字符 ”。 当 然 ， 当 我 们 向 RegExp 构 造 右 传递 
该 模式 时 ， 还 必须 将 它 放 在 一 对 引号 中 。 

4.2.9.1 RegExp 对 象 的 属性 

以 下 是 一 个 正则 表达 式 对 象 所 拥有 的 属性 。 

global: 如 果 该 属性 值 为 false〈 这 也 是 默认 值 ) ， 相 关 搜 索 在 找到 
第 一 个 匹配 时 融会 停止 。 如 果 需 要 找 出 所 有 的 匹配 ， 将 其 设置 为 true 即 
可 。 

ignoreCase: 设置 大 小 写 相 关 性 ， 默 认为 false。 

multiline: 设置 是 否 跟 行 搜 索 ， 默 认为 false。 

lastIndex: 搜索 开始 的 索引 位 ， 默 认 值 为 0。 

source: 用 于 存储 正则 表达 式 匹 配 模式 。 

另外 ， 除 了 lastIndex 外 ， 上 面 所 有 属性 在 对 象 创 建 之 后 就 都 不 能 
被 修改 了 。 

而 且 ， 前 三 个 属性 是 可 以 通过 regex 修饰 符 来 表示 的 。 当 我 们 通过 
构造 器 来 创建 regex 对 象 时 ， 可 以 疝 构 造 器 的 第 二 参数 传递 下 列 字 符 中 
的 任意 组 合 。 























“gR K global. 

“2 代表 ignoreCase。 

“m” 代 表 multiline。 

这 些 字符 可 以 以 任意 顺序 传递 ， 只 要 它们 被 传递 给 了 构造 费 ， 相 应 
的 修饰 符 束 会 被 设置 为 tue。 例 如 在 下 面 的 示例 中 ， 我 们 将 所 有 的 修饰 
符 都 设置 成 了 true: 

> var re = new RegExp('j.*t', 'gmi'); 

现在 来 验证 一 下 : 

> re.global; 

true 

不 过 ， 这 里 的 修饰 符 一 旦 被 设置 了 就 不 能 更 改 : 

> re.global = false; 

> re.global; 

true 

另外 ， 我 们 也 可 以 通过 文本 方式 来 设置 这 种 regex 的 修饰 符 ， 只 需 
将 它们 加 在 斜 线 后 面 : 


> var re = /j.*t/ig; 





> re.global; 

true 

4.2.9.2 RegExp 对 象 的 方法 

RegExp 对 象 中 有 两 种 可 用 于 碍 找 匹 配 内 容 的 方法 : test() 和 exec()。 
这 两 个 方法 的 参数 都 是 一 个 字符 串 ， 但 test(0 方 法 返回 的 是 一 个 布尔 值 

《找到 匹配 内 容 时 为 tue， 人 否则 就 为 false) ， 而 exec0O 返 回 的 则 是 一 个 由 

匹配 到 的 字符 串 组 成 的 数组 。 显 然 ，execgO 能 做 的 工作 更 多 ， 而 testO 只 
有 在 我 们 不 需要 匹配 的 具体 内 容 时 才 会 有 所 用 处 。 人 们 通常 会 用 正则 表 
达 式 来 执行 某 些 验证 操作 ， 在 这 种 情况 下 往往 使 用 test0 就 足够 了 。 

下 面 的 表达 式 是 不 匹配 的 ， 因 为 目标 中 是 大 写 的 J: 

















> /j.*t/.test("Javascript"); 

false 

如 果 将 其 改 成 大 小 写 无 天 的 ， 结 果 就 返回 true 了 : 

> /j.*t/i.test(" Javascript"); 

true 

同样 的 ， 我 们 也 可 以 用 测试 一 下 exec0) 方 法 ， 并 访问 它 所 返回 数组 
的 首 元 素 : 

> /j.*t/i.exec("Javascript" )[0j; 

"Javascript" 

4.2.9.3 以 正则 表达 式 为 参数 的 字符 串 方法 

在 本 章 前 面 ， 我 们 曾 同 您 介绍 过 如 何 使 用 String 对 象 的 mdexOfO 和 
lastIndexOf() 方 法 来 搜索 文本 。 但 这 些 方 法 只 能 用 于 纯 字 符 串 式 的 搜 
索 ， 如 果 想 获得 更 强大 的 文本 搜索 能 力 束 需要 用 到 正则 表达 式 了 。 
String 对 象 也 为 我 们 提供 了 这 种 能 

在 String 对 象 中 ， 以 正则 表达 式 对 象 为 参数 的 方法 主要 有 以 下 这 


些 。 


一 一 





match() 方 法 : 返回 的 是 一 个 包含 匹配 内 容 的 数组 。 

search() 方 法 : 返回 的 是 第 一 个 匹配 内 容 所 在 的 位 置 。 

replace() 方 法 : 该 方法 能 将 匹配 的 文本 蔡 换 成 指定 的 字符 串 。 

split) iA: 能 根据 指定 的 正则 表达 式 将 目标 字符 串 分 割 成 右 干 个 
BATCH o 

4.2.9.4 search() 5match() 

下 面 来 看 一 些 searchO 与 match(0) 方 法 的 用 例 。 首 先 ， 我 们 来 新 建 一 
个 String 对 象 : 

> var s = new String('HelloJavaScriptWorld’); 

然后 调用 其 match0 方 法 ， 这 里 返回 的 结果 数组 中 只 有 一 个 匹配 对 
象 : 


> s.match(/a/); 

["a"] 

接 下 来 ， 我 们 对 其 施加 g 修 饰 符 ， 进 行 global 搜 索 ， 这 样 一 来 返回 的 
数组 中 就 有 了 两 个 结 

> s.match(/a/g); 

Hanra 

下 面 进行 大 小 写 无 关 的 匹配 操作 : 

> s.match(/j.*a/i); 

["Java"] 

而 search() 方 法 则 会 返回 匹配 字符 串 的 索引 位 置 : 

> s.search(/j.*a/i); 

5 

4.2.9.5 replace() 

replace() 方 法 可 以 将 相关 的 匹配 文本 蔡 换 成 菜 些 其 他 字符 串 。 在 下 
面 的 示例 中 ， 我 们 移 除了 目标 字符 串 中 的 所 有 大 写字 符 《〈 实 际 上 是 蔡 换 
为 空 字符 串 ) : 

> s.replace(/[A-Z]/g, "); 

"elloavacriptorld" 

如 果 我 们 忽略 了 g 修 饰 符 ， 结 果 束 只 有 首 个 匹配 字符 被 蔡 换 挥 : 

> s.replace(/[A-Z]/, "); 

"elloJavaScriptWorld" 

SFE PLAT RRE, WAR ATT ALLE AS DERFIR PaE 
PLACA CAS, HY DAE LSS ORNS ATER BU VEC CAS. Pl, FARNI 
在 每 一 个 匹配 字符 前 面 加 了 一 个 下 划 线 : 

> s.replace(/[A-Z]/g, "_$&"); 

"_Hello_Java_Script_World" 

如 果 正 则 表达 式 中 分 了 组 ( 即 带 括 号 ) ， 那 么 可 以 用 $1 RERI 


配 分 组 中 的 第 一 组 ， 而 $2 则 表示 第 二 组 ， 以 此 类 推 。 

> s.replace(/([A-Z])/g, "_$1"); 

"_Hello_Java_Script_World" 

假设 我 们 的 Web 页 面 上 有 一 个 注册 表单 ， 上 面 会 要 求 用 户 输入 E- 
mail 地 址 、 用 户 名 和 密码 。 当 用 户 输入 他 们 的 E-mail 地 址 时 ， 我 们 可 以 
利用 JavaScript 将 E-mail 的 前 半 部 分 提炼 出 来 ， 作 为 后 面 用 户 名 字段 的 建 
X: 

> var email = "stoyan@phpied.com"; 

> var username = email.replace(/(.*)@.*/, "$1"); 

> username; 

"stoyan" 

4.2.9.6 回调 式 蔡 换 

当 我 们 需要 执行 一 些 特 定 的 殖 换 操作 时 ， 也 可 以 通过 返回 字符 串 的 
图 数 来 完成 。 这 样 ， 我 们 就 可 以 在 执行 蔡 换 操作 之 前 实现 一 些 必要 的 处 
理 逻 辑 : 

> function replaceCallback(match){ 

return "_" + match.toLowerCase(); 

} 

> s.replace(/[A-Z ]/g, replaceCallback); 

"_hello_java_script_world" 

该 回调 函数 可 以 接受 一 系列 的 参数 (在 上 面 的 示例 中 ， 我 们 忽略 了 
所 有 参数 ， 但 前 参数 是 依然 存在 的 )。 

首 参 数 是 正则 表达 式 所 匹配 的 内 容 。 

尾 参 数 则 是 被 搜索 的 字符 串 。 

尾 参 数 之 前 的 参数 表示 的 是 匹配 内 容 所 在 的 位 置 。 

剩 下 的 参数 可 以 是 由 regex 模式 所 分 组 的 所 有 匹配 字符 串 组 。 

下 面 让 我 们 来 具体 测试 一 下 。 首 先 ， 我 们 新 建 一 个 变量 ， 用 于 存储 











之 后 传递 给 回调 函数 的 整个 arguments 对 象 : 
> var glob; 
下 一 步 是 定义 一 个 正则 表达 式 ， 我 们 将 E-mail 地 址 分 成 三 个 匹配 
组 ， 具 体格 式 形 如 something@something.something: 
> var re = /(.*)@(.*)\\.C.*)/; 
最 后 就 是 定义 相应 的 回调 函数 了 ， 它 会 接受 glob 数 组 中 的 参数 ， 并 
返回 相应 的 蔡 换 内 容 : 
var callback = function(){ 
glob = arguments; 
return arguments[1] + ' at ' + arguments[2] + ' dot ' +arguments[3]; 
}; 
然后 我 们 融 可 以 这 样 调用 它们 了 : 
> "stoyan@phpied.com".replace(re, callback); 
"stoyan at phpied dot com" 
下 面 是 该 回调 函数 返回 的 参数 内 容 : 
> glob; 








["stoyan@phpied.com", "stoyan", "phpied", com", 0, 
"stoyan@phpied.com"| 

4.2.9.7 split 

我 们 之 前 已 经 了 解 split0 方 法 ， 它 能 根据 指定 的 分 割 字 符 串 将 我 们 
的 输入 字符 串 分 割 成 一 个 数组 。 下 面 就 古 我 们 用 逗号 将 字符 串 分 割 的 结 
果 : 

> var csv = 'one, two,three ,four'; 


> csv.split(’,'); 


WOT WoO 


["one", " two", "three ", "four"] 
BF ETRA PIR FIE ac eee 致 的 情况 ， 这 导 
致 生 成 的 数组 也 会 出 现 多 余 的 空格 。 如 果 我 们 使 用 正则 表达 式 ， 就 可 以 





在 这 里 用 \s* 修 饰 符 来 解决 ， 意 思 就 是 “匹配 0 个 或 多 个 空格 ”: 

> csv.split(As*,\s*/); 

["one", "two", "three", "four"] 

4.2.9.8 用 字符 串 来 代 蔡 过 于 简单 的 regexp 对 象 

关于 我 们 刚刚 讨论 的 四 个 方法 〈split0、matchO、searchO0 和 
replace()) ， 还 有 最 后 一 件 事 不 得 不 担 ， 即 这 些 方法 可 以 接受 的 参数 不 
仅仅 是 一 些 正 则 表达 式 ， 也 包括 字符 串 。 它 们 会 将 接收 到 的 字符 串 参 数 
自动 转换 成 regex 对 象 ， 就 像 我 们 直接 传递 new RegExpO 一 样 。 

例如 ， 下 面 的 replace() 方 法 直接 使 用 字符 串 参 数 来 执行 蔡 换 : 


> "test". replace('t’, 'r'); 








"rest" 

它 与 下 面 的 调用 是 等 价 的 : 

> "test" replace(new RegEXp(t)，T); 

"rest" 

当然 ， 在 执行 这 种 字符 串 传 递 时 ， 我 们 就 不 能 像 平时 使 用 构造 器 或 
者 regex 文本 法 那样 设置 表达 式 修饰 符 了 。 使 用 字符 串 而 不 是 正则 表达 
式 来 答 换 文本 比较 向 见 的 错误 是 ， 使 用 者 往往 会 误 以 为 原 字 符 串 中 所 有 
的 匹配 都 会 蔡 换 。 然 而 如 上 所 述 ， 以 字符 串 为 参数 的 replace() 其 global 修 
饰 符 的 值 将 为 false， 即 只 有 第 一 个 被 匹配 到 的 字符 串 才 会 被 丛 换 。 这 与 
其 他 一 些 编程 语言 不 同 ， 从 而 容易 导致 混淆 。 例 如 : 


> "pool".replace('o', '*'); 











"p*ol" 

而 使 用 者 大 多 数 情况 下 的 意图 是 蔡 换 所 有 的 匹配 : 
> "pool .replace(/o/g, "*"); 

"p**]" 


4.2.10 Error” 


当代 码 中 有 错误 发 生 时 ， 一 个 好 的 处 理 机 制 可 以 帮助 我 们 理解 错误 
发 生 的 原因 ， 并 且 使 我 们 能 以 一 种 较为 优雅 的 方式 来 纠正 错误 。 在 
JavaScript 中 ， 将 会 使 用 try、catch 及 finally 语 句 组 合 来 处 理 错 误 。 当 程序 
中 出 现 错误 时 ， 束 会 抛 出 一 个 Error 对 象 ， 该 对 象 可 能 由 以 下 几 个 内 建构 
造 器 中 的 一 个 产生 而 成 ， 它 们 包括 EvalError、RangeError、 
ReferenceError、SyntaxError、TypeError 和 URIError 等 ， 所 有 这 些 构造 器 
都 继承 目 Error 对 象 。 

下 面 ， 我 们 来 主动 触发 一 个 错误 ， 看 看 会 发 生 些 什么 。 下 面 的 示例 
中 调用 了 一 个 并 不 存在 的 函数 ， 控 制 台 中 输入 : 

> iDontExist(); 


我 们 就 会 看 到 如 图 4-3 所 示 的 内 容 。 
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> idDontExist(); 





© > ReferenceError: iDontExist is not defined 
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图 4-3 
错误 显示 的 方式 在 各 浏览 磺 和 宿主 环境 中 差别 可 能 会 很 大 。 事 实 
上 ， 大 多 数 现 代 浏 览 右 倾 问 于 辐 用 户 隐 藏 错误 ， 但 不 能 因此 就 假设 我 们 
所 有 的 用 户 都 会 屏蔽 错误 显示 ， 而 制作 一 个 没有 错误 、 用 户 体验 完美 的 
页 面 理所当然 是 开发 者 的 责任 。 在 上 面 的 例子 中 ， 错 误 被 显示 是 因为 我 
们 没有 尝试 捕获 (catch〉 这 个 错误 。 程 序 既 没有 预测 到 这 里 会 出 现 错 
误 ， 也 不 知道 怎样 处 理 这 个 错误 。 笠 运 的 是 ， 错 误 捕 获 很 容易 ， 只 需要 
我 们 使 用 try 语 句 后 接 一 个 catch 语 句 即 可 。 























例如 添加 下 面 代码 ， 我 们 就 不 会 看 到 之 前 截图 中 的 那个 错误 显示 


try { 
iDontExistQ); 
} catch (e){ 
// do nothing 
} 
如 您 所 见 ， 这 里 包含 两 部 分 内 容 。 
try 语句 及 其 代码 块 。 
catch 语 句 及 其 参数 变量 和 代码 块 。 
finally 语 句 并 没有 在 这 个 例子 中 出 现 ， 这 是 一 个 可 选项 ， 主 要 用 于 





执行 一 些 无 论 如 何 《〈 无 论 有 没有 错误 发 生 ) 都 要 执行 的 内 容 。 
在 上 面 的 示例 中 ， 我 们 并 没有 在 catch 语 名 后面 的 代码 块 中 写 入 任何 





内 容 ， 但 实际 上 我 们 可 以 在 这 里 加 入 一 些 用 于 修复 错误 的 代码 ， 或 者 至 


少 可 以 将 该 应 用 程序 错误 的 一 些 特定 情况 反馈 给 用 户 。 


catch 语 句 的 参数 〈 括 号 中 的 ) e 实 际 上 是 一 个 Error 对 象 。 跟 其 他 对 


象 一 样 ， 它 也 提供 一 系列 有 用 的 方法 与 属性 。 遗 憾 的 是 ， 不 同 的 浏览 串 








对 于 这 些 方法 与 属性 都 有 着 各 目 不 同 的 实现 ， 但 其 中 有 两 个 属性 的 实现 


还 是 基本 相同 的 ， 那 就 是 e.name 和 e.message。 


现在 ， 让 我 们 来 看 看 这 段 代码 : 
try { 

iDontExist(); 
} catch (e){ 

alert(e.name + ': ' + e.message); 
} finally { 

alert('Finally!"); 
} 


如 您 所 见 ， 这 里 的 第 一 个 alert() 显 示 了 e.name 和 e.message， 而 后 一 
个 则 显示 了 Finally! 字样 。 

在 Firefox 和 Chrome 中 ， 第 一 个 alert() 将 显示 的 内 容 是 
ReferenceError: iDontExist is not defined。 而 在 Internet Explorer 中 则 是 
TypeError: Object expected. UZ, MBE SMa: 

e.name 所 包含 的 是 构造 当前 Error 对 象 的 构造 器 名 称 。 

由 于 Eror 对 象 在 各 宿主 环境 〈 浏 览 器 ) 中 的 表现 并 不 一 致 ， 因 此 
在 这 里 我 们 需要 使 用 一 些 技巧 ， 以 便 我 们 的 代码 能 处 理 各 种 类 型 的 错误 

( 即 e.name 的 值 )。 

当然 ， 我 们 也 可 以 用 new Error(0) 或 者 其 他 Error 对 象 构造 器 来 自 定 
义 一 个 Error 对象， 然后 告诉 JavaScript 引 擎 某 个 特定 的 条 件 ， 并 使 用 
throw 语 句 来 殷 出 该 对 象 。 

下 面 来 看 一 个 具体 的 示例 ， 假 设 我 们 需要 调用 一 个 maybeExists() 疝 
数 ， 并 将 函数 返回 结果 作为 除数 来 执行 除法 运算 。 我 们 想 统 一 进行 错误 
处 理 ， 无 论 错误 原因 是 maybeExists() 函 数 不 存 在 ， 还 是 返回 值 不 是 我 们 
想 要 的 ， 那 么 代码 都 应 该 这 样 写 : 

try { 

var total = maybeExists(); 
if (total === 0) { 
throw new Error('Division by zero!'); 
} else { 
alert(50 / total); 
} 
} catch (e){ 
alert(e.name + ': ' + e.message); 
} finally { 
alert(‘Finally!'); 








} 

根据 maybeExistsO 函 数 的 存在 与 否 及 其 返回 值 ， 这 段 代 人 码 会 弹出 几 
种 不 同 的 信息 : 

如 果 ”maybeExists() 疯 数 不 存 在 ， 我 们 在 ”Firefox ”中 将 会 得 到 信 
‘\“ReferenceError: maybeExists() is not defined”, mÆ IE PMI 
为 “TypeError:Object expected” . 

如 果 maybeExists() 返 回 值 为 0， 我 们 将 得 到 的 信息 是 “Error: Division 
by zero!”。 

如 果 maybeExists() 的 返回 值 为 2， 我 们 将 得 到 的 alert 信息 是 25。 

在 以 上 所 有 的 情况 下 ， 程 序 都 会 弹出 第 二 个 alert 窗 口 ， 内 容 
为 “Finally! ”。 

另外 ， 这 里 抛 出 的 是 一 般 性 的 错误 提示 ， 使 用 的 是 throw new 
Error(‘Division by zero!") 语 句 ， 然 而 我 们 也 可 以 根据 自身 的 需要 来 明确 错 
误 类 型 。 例 如 可 以 利用 throw new RangeError('Division by zero!") 语 句 来 
抛 出 该 错误 ， 或 者 不 用 任何 构造 器 ， 直 接 定 义 一 个 一 般 对 象 抛 出 : 


throw { 

















name: "MyEtrror", 
message: "OMG! Something terrible has happened" 
} 
这 样 一 来 ， 我 们 就 可 以 使 用 目 定 义 的 Error 名 ， 从 而 解雇 了 浏览 右 之 
间 由 于 抛 出 错误 不 相同 所 导致 的 问题 。 





4.3 本 章 小 结 





在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 中 ， 我 们 学 习 
了 JavaScript 的 五 大 基本 数据 类 型 (number, strings boolean, nulli 
undefined) ， 而 且 ， 我 们 也 说 过 除 这 些 基本 类 型 以 外 的 任何 数据 都 属于 
对 象 。 在 本 章 ， 我 们 又 了 解 了 以 下 内 容 : 

对 象 与 数组 很 类 似 ， 但 它 还 允许 我 们 指定 键 值 。 

对 象 通 常 都 会 拥有 寿 干 个 属性 。 

其 中 有 些 属性 可 以 是 函数 (函数 本 吴 也 是 数据 , 回忆 下 var f = 
function() {};〉。 这 些 属性 通常 称 为 方法 。 

数组 本 吴 也 可 以 看 做 拥有 一 系列 数字 属性 ， 并 外 加 一 个 会 自动 增长 
的 length 属性 的 对 象 。 

Array 对 象 中 有 着 一 系列 非常 有 用 的 方法 (例如 sortO 和 slice()〉。 

函数 也 是 一 种 对 象 ， 它 们 本 喘 也 有 属性 〈 例 如 length 和 prototype) 
和 方法 《例如 cal0 和 applyO) 。 

对 于 五 种 基本 数据 类 型 ， 除 了 undefined 和 null 外 ， 其 他 三 个 都 有 相 
应 的 构造 器 函数 ， 分 别 是 Number()、String(0) 以 及 Boolean()。 通 过 它们 我 
们 可 以 创建 出 相应 的 对 象 。 通 过 将 这 些 基 本 类 型 封装 成 对 象 ， 我 们 就 可 
以 在 其 中 集成 一 些 有 用 的 工作 方法 。 

Number()、String() 以 及 Boolean() 的 调用 可 分 为 两 种 形式 : 

使 用 new 操作 符 调 用 一 一 用 于 新 建 对 象 。 

不 使 用 new 操作 符 调用 一 一 用 于 将 任意 值 转换 成 基本 数据 类 型 。 

此 外 ， 我 们 还 学 习 了 一 系列 内 建构 造 器 函数 ， 其 中 包括 ”Object()、 
Array()、Function()、Date()、RegExpO 和 Error()， 以 及 不 属于 构造 器 的 
全 局 对 象 Math。 


























现在 ， 我 们 应 该 明白 对 象 在 JavaScript 程序 设计 中 的 中 心地 位 ， 几 
乎 所 有 的 东西 都 是 对 象 ， 或 者 可 以 封装 成 对 象 。 
最 后 ， 让 我 们 再 来 熟悉 一 下 对 象 的 文本 标识 法 〈 见 表 4-2) 。 
表 4-2 





名 称 文本 记 法 构造 器 相关 示例 
WR {} new Object () {prop: 1} 
数组 [] new Array () [152.352 MESSES J 





new RegExp('pattern', 
正则 表达 式 /pattern/modifiers /java.*/img 


"modifiers') 











1. 请 看 下 列 代 码 : 
function F() { 

function CQ) { 

return this; 

} 

return C(); 
} 
var o = new FQ); 
请 问 上 面 的 this 值 指向 的 是 全 局 对 象 还 是 对 象 0? 
2. 下 面 代码 的 执行 结果 会 是 什么 ? 
function CO{ 





this.a = 1; 
return false; 
} 
console.log(typeof new C()); 
3. 下 面 这 段 代 人 码 的 执行 结果 又 将 是 什么 ? 
-p= [2 12: 
> c.sort(); 
> c.join('--'); 
> console.log(c); 
4. 在 StringO 构 造 器 不 存在 的 情况 下 自 定 义 一 个 MyString(0) 的 构造 
器 函数 。 记 住 ， 由 于 ”String0 不 存在 ， 因 此 您 在 写 该 构造 器 函数 时 不 能 
使 用 任何 属于 内 建 String 对 象 的 方法 和 属性 。 并 且 要 让 您 所 创建 的 对 象 


通过 以 下 测试 : 

> var s = new MyString(‘hello’); 

> s.length; 
5 

> s[0]; 
"h" 

> s.toString(); 
"hello" 

> s.valueOf(); 
"hello" 

> s.charAt(1); 
"a" 

> s.charAt('2'); 
nn 

> s.charAt(‘e'); 
"h" 

> s.concat(' world!'); 
"hello world!" 

> s.slice(1,3); 
Nel" 

> s.slice(0,-1); 
"hell" 

> s.split(‘e’); 
["h", "llo"] 

> s.split(T'); 
["he", "", "o"] 


将 输入 字符 串 当做 一 个 数组 ， 用 for 人 循环 来 进行 裔 历 。 


5. 更 新 上 面 的 MyStringO 构 造 器 ， 为 其 添加 一 个 reverse() 方 法 。 
可 以 尝试 利用 数组 本 号 的 reverse() 方 法 。 
6. 在 Array0 构 造句 以 及 相关 的 数组 文本 标识 法 都 不 存在 的 情况 
下 ， 目 定义 一 个 类 似 的 MyArray0O 构 造句 ， 并 令 其 通过 以 下 测试 ; 
> var a = new MyArray(1,2,3,"test"); 
> a.toString(); 
"1,2,3,test" 
> a.length; 
4 
> afa.length - 1]; 
"test" 
> a.push(‘boo’); 
5 
> a.toString(); 
"1,2,3,test,boo" 
> a.pop(); 
[boo] 
> a.toString(); 
"1,2,3,test" 
> a.join(’,'); 
"1,2,3,test" 
> a.join(' isn\'t '); 
"1 isn't 2 isn't 3 isn't test" 
如 果 您 觉得 这 个 练习 很 有 趣 ， 可 以 不 用 止步 于 join0 方 法 ， 继 续 为 
其 创建 尽 可 能 多 的 方法 。 
7. 在 Math 对 象 不 存在 的 情况 下 ， 创 建 一 个 类 似 的 MyMath 对 象 ， 并 
为 其 添加 以 下 方法 : 


随机 返回 min 到 max 区 间 中 


MyMath.rand(min, max, inclusive) 





的 一 个 数 ，inclusive 为 true 时 为 财 区 间 〈 这 也 是 默认 情况 ) 。 
MyMath.min(array) 一 一 返回 目标 数组 中 的 最 小 值 。 
MyMath.max(array) 一 一 返回 目标 数组 中 的 最 大 值 。 


































































































在 本 章 ， 我 们 将 着 重 介 绍 函 数 对 象 中 的 原型 (prototype〉 属性。 对 
于 JavaScript ”的 学 习 来 说 ， 理 解 原型 的 工作 原理 是 非常 重要 的 一 环 ， 毕 
竟 ， 它 的 对 象 模型 经 常 被 视 为 是 基于 原型 的 。 当 然 ， 要 理解 原型 其 实 并 
不 是 一 件 很 难 的 事 ， 只 不 过 由 于 这 是 一 个 全 新 的 概念 ， 我 们 接受 起 来 需 
要 一 点 时 间 轩 了。 事实 上 在 JavaScript 中 ， 像 原型 或 闭 包 ( 见 第 3 章 : A 
数 ) 这 样 的 概念 ， 只 要 我 们 能 “领悟 ?其 中 的 原理 ， 一 切 都 会 显得 格外 简 
单 而 清晰 。 而 且 在 后 续 内 容 中 ， 本 书 还 会 围绕 原型 概念 展开 大 量 的 示例 
演示 ， 以 帮助 读者 巩固 并 加 深 对 这 一 概念 的 熟悉 程度 。 

总 体 而 言 ， 本 章 将 涉及 以 下 话题 。 

介绍 每 个 函数 都 拥有 的 prototype 属性 ， 而 该 属性 所 存储 的 残 是 原型 
对 象 。 

如 何 为 原型 对 象 添加 属性 。 

如 何 使 用 原型 对 象 中 的 新 增 属性 。 

如 何 区 分 对 象 自 身 属性 与 原型 属性 。 

_proto_ 介绍， 该 属性 用 于 保存 各 对 象 原型 的 神秘 链接 。 

原型 方法 简介 ， 包 括 isPrototypeOf()、hasOwnProperty()、propertyls 
Enumerable() 等 。 

介绍 如 何 (利用 原型 〉 强 化 数组 或 字符 串 这 样 的 内 建 对 象 〈( 并 说 明 
OPEC BD) 。 














5.1 原型 属性 


在 JavaScript 中 ， 函 数 本 身 也 是 一 个 包含 了 方法 和 属性 的 对 象 。 经 过 


之 前 的 学 习 ， 相 信 我 们 对 它 的 一 些 方法 〈 如 apply0 和 call0) 及 属性 《如 
length 和 constructor) 已 经 不 会 感到 陌生 了 。 接 下 来 ， 我 们 要 介绍 的 是 函 


数 对 象 的 男 一 个 属性 
众所周知 ， 只 要 我 们 像 下 面 这 样 简单 地 定义 一 个 函数 foo0， 就 可 以 





prototype。 


像 访问 其 他 对 象 一 样 访问 该 函数 的 属性 : 


性 ， 


> function foo(a, b){ 
return a * b; 

1 
> foo.length 

2 

> foo.constructor; 

function Function(){[native code]} 

而 这 些 〈 在 函数 定义 时 被 创建 的 ) 属性 中 就 包括 有 prototype JS 
它 的 初始 值 是 一 个 “ 空 ” 对 象 。 

> typeof foo.prototype; 

"object" 

当然 ， 我 们 也 可 以 自己 添加 该 属性 ， 就 像 这 样 : 

> foo.prototype = {}; 

而 且 我 们 还 可 以 赋予 这 个 空 对 象 一 些 方法 和 属性 ， 这 并 不 


男 数 本 身 造 成 什么 影响 ， 因 为 只 有 当 foo0 作 为 构造 器 使 用 时 ， 这 些 属性 
才 会 起 作用 。 








E-t, RNAS SME Rae BL, HH ORT 
(构造 ) 对 象 。 这 种 做 法 的 主要 意图 是 通过 new 操 作 符 来 调用 函数 ， 以 
达到 访问 对 象 his 值 的 目的 ， 然 后 ， 通 过 this RATHA AV E ete as T 
返回 的 对 象 了 。 这 样 ， 我 们 就 有 了 一 种 赋予 新 建 对 象 一 定 功能 〈 即 为 其 
添加 属性 和 方法 ) 的 方法 。 

下 面 ， 我 们 来 构建 一 个 具体 的 构造 器 函数 GadgetO0， 看 看 它 完 竟 是 
如 何在 新 建 对 象 时 为 其 添加 属性 与 方法 的 。 


function Gadget(name, color) { 








this.name = name; 
this.color = color; 
this.whatAreYou = function(){ 
return 'I am a' + this.color + '' + this.name; 
ie 
} 
当然 ， 添 加 属性 和 方法 还 有 另 一 种 方式 ， 即 通过 构造 右 函 数 的 
prototype 属性 来 增加 该 构造 右 所 能 提供 的 功能 。 下 面 融 让 我 们 为 上 面 的 
构造 器 增加 两 个 属性 (price 和 rating) 和 一 个 方法 〈 即 getInfo0) 1E. H 
于 prototype 属 性 包含 的 是 一 个 对 象 ， 所 以 您 可 以 这 样 : 
Gadget.prototype.price = 100; 
Gadget.prototype.rating = 3; 
Gadget.prototype.getInfo = function() { 
return ‘Rating: ' + this.rating +', price: ' + this.price; 
}; 
如 有 果 您 不 想 将 它们 逐一 添加 到 原型 对 象 中 去 ， 也 可 以 另外 定义 一 个 
HR. AMARE mE AREE: 





Gadget.prototype = { 
price: 100, 
rating: ... /* and so on... */ 


i 
5.1.2 1 AY 的 方法 与 届 性 


Æ prototype 属性 中 添加 完 所 有 的 方法 和 属性 后 ， 我 们 束 可 以 直 
接 用 该 构造 器 来 新 建 对 象 了 。 例 如 在 下 面 的 代码 中 ， 我 们 用 构造 器 
Gadget() 新 建 了 一 个 newtoy 对 象 ， 然 后 您 就 可 以 访问 之 前 所 定义 的 那些 
属性 和 方法 了 。 

> var newtoy = new Gadget(webcam,', 'black'); 

> newtoy.name; 

"webcam" 

> newtoy.color; 

"black" 

> newtoy.whatAre Y ou(); 

"I am a black webcam" 

> newtoy.price; 

100 

> newtoy.rating; 

3 

> newtoy.getInfo(); 

"Rating: 3, price: 100" 

对 于 原型 来 说 ， 最 重要 的 一 点 是 要 理解 它 的 “实时 ”(live) PE. H 
于 在 JavaScript 中 ， 几 乎 所 有 对 象 都 是 通过 传 引 用 的 方式 来 传递 的 ， 因 此 
我 们 所 创建 的 每 个 新 对 象 实体 中 并 没有 一 份 属于 上 自己 原型 副本 。 这 也 就 





意味 着 我 们 可 以 随时 修改 prototype 属性 ， 并 且 由 同一 构造 器 创建 的 所 
有 对 象 的 prototype 属性 也 都 会 同时 改变 (甚至 还 会 影响 在 修改 之 前 就 
己 经 创建 了 的 那些 对 象 ) 。 
下 面 继续 之 前 的 例子 ， 让 我 们 再 癌 原 型 中 添加 一 个 新 方法 : 
Gadget.prototype.get = function(what) { 








return this[what]; 
然后 您 就 会 看 到 ， 即 便 newtoy 对 象 在 get() 方 法 定义 之 前 就 已 经 被 创 
建 了 ， 但 我 们 依然 可 以 在 该 对 象 中 访问 新 增 的 方法 : 
> newtoy.get(‘price'); 
100 
> newtoy.get(color ); 
"black" 





5.1.3 性 与 原型 属性 


在 之 前 关于 getInfo() 的 那个 示例 中 ， 我 们 是 使 用 this 指 针 来 完成 对 象 
访问 的 ， 但 其 实 直 接 引 用 Gadget.prototype 也 可 以 完成 同样 的 操作 : 
Gadget.prototype.getInfo = function() { 


return ‘Rating: ' + Gadget.prototype.rating +', price: ' + 





Gadget.prototype.price; 
}; 
这 之 间 会 有 什么 不 同 吗 ? 想 要 回答 这 个 问题 ， 我 们 就 必须 要 更 深入 
地 理解 原型 的 工作 原理 。 
下 面 ， 让 我 们 再 回 到 之 前 的 那个 newtoy 对 象 上 来 : 
> var newtoy = new Gadget('webcam', 'black'); 


当 我 们 访问 newtoy 的 某 个 属性 ， 例 如 newtoy.name 时 ，JavaScript 引 


敬 会 通 历 该 对 象 的 所 有 属性 ， 并 查找 出 name 属 性 。 如 果 找 到 了 就 会 并 即 
返回 其 值 。 

> newtoy.name; 

"webcam" 

那么 ， 如 果 我 们 访问 rating 属性 又 会 发 生 什 么 呢 ? JavaScript 引擎 
依然 会 查询 newtoy 对 象 的 所 有 属性 ， 但 这 一 回 它 找 不 到 一 个 叫 rating 的 
属性 了 。 接 下 来 ， 脚 本 引擎 加 会 去 查询 用 于 创建 当前 对 象 的 构造 右 函 数 
的 原型 (等 价 于 我 们 直接 访问 newtoy. constructor.prototype) 。 如 果 在 
原型 中 找到 了 该 属性 ， 束 立即 使 用 该 属性 。 

> newtoy.rating; 

3 

这 种 方式 与 直接 访问 原型 属性 是 一 样 的 。 每 个 对 象 都 有 属于 自己 的 
构造 器 属性 ， 其 所 引用 的 就 是 用 于 创建 该 对 象 的 那个 函数 ， 所 以 在 这 
里 : 


> newtoy.constructor === Gadget; 





true 

> newtoy.constructor.prototype.rating; 

3 

现在 ， 让 我 们 再 仔细 回顾 一 下 整个 过 程 : 首先 我 们 知道 每 个 对 象 都 
会 有 一 个 构造 器 ， 而 原型 本 身 也 是 一 个 对 象 ， 这 意味 着 它 必 然 也 有 一 个 
构造 器 ， 而 这 个 构造 器 又 会 有 上 自己 的 原型 。 于 是 这 种 结构 可 能 会 一 直 不 
断 地 持续 下 去 ， 并 最 终 取决 于 原型 链 ( prototype chain) 的 长 度 ， 但 其 
最 后 一 坏 肯定 是 Object 内 建 对 象 ， 因 为 它 是 最 高 级 的 父 级 对 象 。 事 实 
上 ， 如 果 您 试 着 调用 一 下 newtoy.toString() 的 话 ， 由 于 newtoy 对 象 及 其 原 
型 中 都 不 存在 toString0 方 法 。 最 后 我 们 能 调用 的 也 就 只 有 Object 对 象 
的 toString() 方 法 了 。 


> newtoy.toString(); 














"Lobject Object]" 














通过 上 面 的 讨论 ， 我 们 知道 如 果 在 一 个 对 象 自身 属性 中 没有 找到 指 
定 的 属性 ， 就 会 使 用 〈 如 果 存 在 的 话 ) 原型 链 中 查找 到 的 相关 的 属性 。 
但 是 ， 如 果 册 上 对 象 的 目 身 属性 与 原型 属性 同名 义 该 怎么 办 呢 ? 答案 是 
对 象 目 身 属性 的 优先 级 高 于 原型 属性 。 

让 我 们 来 看 一 个 具体 的 示例 ， 即 同一 个 属性 名 同时 出 现在 对 象 的 目 
号 属 性 和 原型 属性 中 : 


> function Gadget(name) { 








this.name = name; 


} 
> Gadget.prototype.name = ‘mirror’; 
PRI ERATE POT RR, FFU MIA RE name late: 


> var toy = new Gadget('camera’); 
y 





> toy.name; 

"camera" 

我 们 可 以 通过 hasOwnProperty(0) 方 法 来 判断 一 个 属性 是 自身 属性 还 
是 原型 属性 。 


> toy.hasOwnProperty(‘name’); 





true 


这 时 候 ， 如 果 我 们 删除 这 个 属性 ， 同 名 的 原型 属性 就 会 “ 浮 出 水 


> delete toy.name; 
true 


> toy.name; 


"mirror" 

> toy.hasOwnProperty('name'); 

false 

当然 ， 我 们 随时 都 可 以 重建 这 个 对 象 的 自身 属性 : 

> toy.name = ' Camera ; 

> toy.name; 

"camera" 

如 何 判 断 一 个 对 象 的 某 个 原型 属性 到 底 是 原型 链 中 的 哪个 原型 的 属 
性 呢 ? 答案 仍然 是 使 用 hasOwnProperty0 属 性 。 例 如 ， 我 们 想 知 道 
toString 属 性 来 自 于 哪里 : 

> toy.toString(); 

"[object Object]” 

> toy.hasOwnProperty(‘toString’); 

false 

> toy.constructor.hasOwnProperty(‘toString’); 

false 

> toy.COnstructor.Protoype.hasOwnProperty(toString ); 

false 

> Object.hasOwnProperty(‘toString’); 

false 

> Object.prototype.hasOwnProperty(toString ); 

true 

啊 哈 ! 

枚 举 属性 

如 果 想 获得 茶 个 对 象 所 有 属性 的 列表 ， 我 们 可 以 使 用 for-in 循 环 。 
在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 中 ， 我 们 已 经 知道 
了 如 何 使 用 该 循环 来 过 历数 组 中 的 所 有 元 素 。 当 时 我 们 提 到 ，for 更 适 








合 数组 而 for-in 更 适合 对 象 。 让 我 们 以 构造 URL 字 符 串 为 例 : 
var params = { 
productid: 666, 
section: ‘products’ 
} 
var url = 'http://example.org/page.php?', 
i, 
query = []; 
for (i in params) { 
query.push(i + '=' + params[i]); 

} 

url += query.join('&’); 

最 后 我 们 得 到 的 变量 url 为 : 

"http://example.org/page.php?productid=666&section=products" 

在 这 里 ， 有 些 细节 需要 留意 。 

并 不 是 所 有 的 属性 都 会 在 。 for-in ”循环 中 显示 。 例 如 (数组 的 ) 
length 属性 和 constructor 属性 就 不 会 被 显示 。 那 些 会 显示 的 属性 被 称 为 
是 可 枚 举 的 ， 我 们 可 以 通过 各 个 对 象 所 提供 的 propertyIsEnumerable() 方 
法 来 判断 对 象 的 某 个 属性 是 否 可 枚 举 。 在 ES5 中 ， 我 们 可 以 具体 指定 哪 
些 属性 可 枚 举 ， 而 在 ES3 中 没有 这 个 功能 。 

原型 链 中 的 各 个 原型 属性 也 会 被 显示 出 来 ， 当 然 前 提 是 它们 是 可 枚 
举 的 。 我 们 可 以 通过 对 象 的 _ hasOwnProperty() 方 法 来 判断 一 个 属性 是 对 
象 自身 属 性 还 是 原型 属性 。 

对 于 所 有 的 原型 属性 ，propertyIsEnumerable() 都 会 返回 false， 包 括 
那些 在 for-in 循 环 中 可 枚 举 的 属性 。 

下 面 来 看 看 这 些 方法 具体 是 如 何 使 用 的 。 首 先 ， 我 们 来 定义 一 个 简 
化 版 的 Gadget(): 











function Gadget(name, color) { 

this.name = name; 

this.color = color; 

this.getName = function(){ 

return this.name; 

ie 
} 
Gadget.prototype.price = 100; 
Gadget.prototype.rating = 3; 
然后 新 建 一 个 对 象 : 
var newtoy = new Gadget('‘webcam’, 'black’); 
现在 ， 如 果 对 它 执行 for-in 人 循环 ， 就 会 列 出 该 对 象 中 的 所 有 属性 ， 

包括 原型 中 的 属性 : 


for (var prop in newtoy) { 





console.log(prop + '='+ newtoy[prop]); 
} 
其 结果 甚至 包括 该 对 象 的 方法 (因为 方法 本 质 上 也 可 以 被 视 为 是 函 
数 类 型 的 属性 ) : 


name = webcam 
color = black 
getName = function () { 


return this.name; 


} 
price = 100 
rating = 3 


如 果 要 对 对 象 属 性 和 原型 属性 做 一 个 区 分 ， 就 需要 调用 
hasOwnProperty() 方 法 ， 我 们 可 以 先 来 试 一 下 : 


> newtoy.hasOwnProperty(‘name’); 

true 

> newtoy.hasOwnProperty(‘price’); 

false 

下 面 我 们 再 来 循环 一 次 ， 不 过 这 次 只 显示 对 象 的 自身 属性 : 


for (var prop in newtoy) { 





if (newtoy.hasOwnProperty(prop)) { 


console.log(prop + '=' + newtoy[prop]); 


} 

结果 为 : 

name=webcam 

color=black 

getName=function () { 

return this.name; 

} 

现在 我 们 来 试 试 propertyIsEnumerable()， 该 方法 会 对 所 有 的 非 内 建 
对 象 属性 返回 true: 


> newtoy.propertyIsEnumerable(‘name’); 





true 

而 对 于 内 建 属性 和 方法 来 说 ， 它 们 大 部 分 都 是 不 可 枚 举 的 : 

> newtoy.propertylsEnumerable(‘constructor'); 

false 

男 外 ， 任 何 来 自 原型 链 中 的 属性 也 是 不 可 枚 举 的 : 

> newtoy.propertyIsEnumerable('price'); 

false 

但 是 需要 注意 的 是 ， 如 果 propertyIsEnumerableO 的 调用 是 来 自 原 型 


链 上 的 某 个 对 象 ， 那 么 该 对 象 中 的 属性 是 可 枚 举 的 。 
> newtoy.constructor.prototype.propertyIsEnumerable('price’); 


true 
5.1.5 isPrototypeOf() 77 } 


每 个 对 象 中 都 会 有 一 个 isPrototypeOf() 方 法 ， 这 个 方法 会 告诉 我 们 
当前 对 象 是 否 是 男 一 个 对 象 的 原型 。 
让 我 们 先 来 定义 一 个 简单 的 对 象 monkey: 


var monkey = { 





hair: true, 
feeds: 'bananas’, 


breathes: ‘air' 


下 
然后 ， 我 们 再 创建 一 个 叫做 Human0 的 构造 器 函数 ， 并 将 其 原型 属 
性 设置 为 指向 monkey: 


function Human(name) { 
this.name = name; 

} 

Human.prototype = monkey; 

现在 ， 如 果 我 们 新 建 一 个 叫做 george 的 Human 对 象 ， 并 提 
问 “monkey 是 george 的 原型 吗 ? ”， 答 案 是 true。 

> var george = new Human('George’); 

> monkey.isPrototypeOf(george); 

true 

需要 注意 的 是 ， 我 们 在 这 里 是 预先 知道 monkey 可 能 是 george 的 原 
型 ， 才 提出 了 问题 “monkey 是 你 的 原型 吗 ? ”， 然 后 获得 一 个 布尔 值 作 为 





回应 。 那 么 ， 是 否 能 在 不 知道 某 个 对 象 原型 是 什么 的 情况 下 ， 获 得 对 象 
的 原型 呢 ? 答案 是 : 大 多 数 浏览 器 可 以 。 因 为 大 多 数 浏览 右 都 实现 了 
ES5 的 Object.getPrototypeOfO 方 法 。 

> Object.getPrototypeOf(george).feeds; 

"banana" 

> Object.getPrototypeOf(george) === monkey; 

true 

而 对 于 男 一 部 分 实现 了 ES5 部 分 功能 ， 却 没有 实现 getPrototypeOf() 
方法 的 浏览 器 ， 我 们 可 以 使 用 特殊 属性 _proto 


5.1.6 4H AH roto 链 








现在 ， 我 们 已 经 了 解 了 当 我 们 访问 一 个 在 当前 对 象 中 不 存在 的 属性 
时 ， 相 关 的 原型 属性 就 会 被 纳入 查询 范围 。 
下 面 让 我 们 改写 一 下 那个 用 monkey 对 象 做 原型 的 Human() 对 象 构造 


> var monkey = { 
feeds: 'bananas', 
breathes: ‘air’ 
}; 
> function Human() {} 
> Human.prototype = monkey; 
这 次 我 们 来 创建 一 个 developer 对 象 ， 并 赋予 它 一 些 属性 : 
> var developer = new Human(); 
> developer.feeds = ‘pizza’; 


> developer.hacks = ‘JavaScript’; 


接着 ， 我 们 来 访问 一 些 属性 ， 例 如 developer 对 象 的 hacks 属 性 : 


> developer.hacks; 

"JavaScript" 

当然 ，feeds 也 一 样 可 以 在 该 对 象 中 找到 : 

> developer.feeds; 

"pizza" 

但 breathes 在 developer 对 象 自 身 的 属性 中 是 不 存在 的 ， 所 以 束 得 去 
原型 中 查询 ， 就 好 像 其 中 有 一 个 神秘 的 链接 ， 或 者 秘密 通道 指向 了 相关 
的 原型 对 象 。 


> developer.breathes; 





"air" 

在 现代 JavaScript EEA, XA P KAEA I Ae De A BY BE 
接 ， 这 个 神秘 的 链接 被 叫做 _proto_ 属性 (proto 这 个 词 的 两 边 各 有 两 
条 下 划 线 ) 。 


> developer.__proto__ === monkey; 





true 

当然 ， 出 于 学 习 的 目的 来 调用 这 种 神秘 的 属性 是 无 可 厚 非 的 ， 但 如 
果 是 在 实际 的 脚本 编写 中 ， 这 并 不 是 一 个 好 主意 。 因 为 该 属性 在 Intemet 
Explorer 之 类 的 浏览 器 中 是 不 存在 的 ， 因 此 脚本 就 不 能 实现 跨 平 台 了 。 

另外 需要 提示 的 是 ，_proto “与 prototype 并 不 是 等 价 的 。 
proto ”实际 上 是 某 个 实例 对 象 的 属性 ， 而 prototype 则 是 属于 构造 右 函 
数 的 属性 。 


> typeof developer. __proto__; 




















"object" 

> typeof developer.prototype; 
"undefined" 

> typeof developer.constructor.prototype; 


"object" 


二 万 要 记 住 ，_proto “只 能 在 学 习 或 调试 的 环境 下 使 用 。 或 者 如 果 
你 的 代码 碰巧 只 需要 在 符合 ES5 标 准 的 环境 中 使 用 的 话 ， 你 也 可 以 使 用 
Object.getPrototypeOfO 方 法 。 





Sa EX 


在 JavaScript 中， 内 建 对 象 的 构造 器 函数 《〈 例 如 Array. String. 
Object Function) 都 是 可 以 通过 其 原型 来 进行 扩展 的 。 这 意味 着 我 们 
可 以 做 一 些 事情 ， 例 如 只 要 往 数组 原型 中 添加 新 的 方法 ， 就 可 以 使 其 在 
所 有 的 数组 可 用 。 下 面 ， 我 们 就 来 试 试看 。 

PHP 中 有 一 个 叫做 in_array(0) 的 函数 ， 主 要 用 于 查询 数组 中 是 否 存在 
某 个 特定 的 值 。JavaScript 中 则 没有 一 个 叫做 inArray0) 的 方法 (不 过 在 
ES5 中 有 indexOfO 方 法 ) ， 因 此 ， 下 面 我 们 通过 Array.prototype 来 实现 一 
ae 

Atray.prototype.inArray = function(needle) { 

for (var i = 0, len = this.length; i < len; i++) { 
if (this[i] === needle) { 


return true; 


} 
return false; 
}; 
现在 ， 所 有 的 数据 对 象 都 拥有 了 一 个 新 方法 ， 我 们 来 测试 一 下 : 
> var colors = ['red', ‘green’, 'blue']; 
> colors.inArray('red'); 
true 
> colors.inArray('yellow'); 


false 


这 很 简单 ! 我 们 可 以 再 做 一 次 。 假 设 我 们 的 应 用 程序 需要 一 个 反 转 


字符 串 的 功能 ， 并 且 也 觉得 String 对 象 应 该 有 一 个 reverse() 方 法 ， 毕 况 
Array 对 象 是 有 reverse() 方 法 的 。 其 实 , Æ String ”的 原型 中 添加 一 个 
reverse() 方 法 也 很 容易 ， 我 们 可 以 借助 于 Array.prototype. ”reverse() 方 法 
《这 与 第 4 章 : 对 象 中 的 某 道 练 习题 很 相似 ) 。 


String.prototype.reverse = function() { 





return Array.prototype.reverse.apply(this.split(")).join("); 

} 

在 这 段 代 码 中 ， 我 们 实际 上 是 先 利 用 split0 方 法 将 目标 字符 串 转 换 
成 数组 ， 然 后 再 调用 该 数组 的 reverse() 方 法 产生 一 个 反 向 数组 。 最 后 通 
过 join0 方 法 将 结果 数组 转换 为 字符 串 。 下 面 我 们 来 测试 一 下 这 个 新 方 
es 

> "bumblebee".reverse(); 

"eebelbmub" 

这 真是 个 好 名 字 ， 听 起 来 就 像 茶 种 很 大 的 、 非 着 吓人 的 《而 且 可 能 
Be BEA) 神秘 生物 ， 不 是 吗 ? 




















由 于 通过 原型 来 扩展 内 建 对 象 是 一 项 非常 强大 的 技术 ， 有 了 它 ， 我 
们 几乎 可 以 随心 所 欲 地 重 塑 JavaScript 语言 的 能 力 。 但 也 正 是 由 于 它 有 
如 此 强大 的 威力 ， 我 们 在 选择 使 用 这 项 能 力 时 就 必须 慎之 又 慎 。 

原因 在 于 一 旦 开发 者 熟悉 了 JavaScript， 那 么 无 论 他 在 用 哪些 第 三 方 
库 或 者 工具 ， 他 都 会 预期 JavaScript 内 建 对 象 与 方法 和 他 的 认 知 相同 。 
一 旦 修改 了 内 建 对 象 ， 它 们 的 行为 会 发 生 改 变 ， 代 码 的 用 户 与 维护 者 就 
会 觉得 困惑 ， 从 而 导致 无 法 预期 的 错误 。 

而 且 ，JavaScript 目 身 也 会 发 展 ， 浏 览 堪 厂商 文 持 的 功能 会 越 来 越 
多 ， 没 准 我 们 今天 所 缺失 的 ， 想 通过 原型 来 扩展 的 功能 ， 明 天 就 会 出 现 




















在 内 建 方法 中 。 在 这 种 情况 下 ， ROTERMANN 要 了 。 另 外 ， 
假设 我 们 已 经 编写 了 大 量 的 代码 ， 这 些 代 码 都 是 基于 基本 对 象 扩展 而 来 
的 自 定 义 方法 ， SEE RAR NHR) LA RE TIT 但 
我 们 这 些 自 定 义 方 法 又 与 新 的 内 建 方法 有 些许 不 同 ， 这 个 时 候 会 发 生 什 
ANE? 
其 实 对 基于 相关 内 建 原 型 来 增加 自 定 义 方法 这 种 技术 来 说 ， 最 常用 
且 最 能 被 接受 的 例子 ， 是 实现 让 老式 浏览 器 支持 新 功能 ， 而 且 应 该 是 已 
被 ECMAScript 委员 会 标准 化 了 的 、 为 现代 浏览 器 所 实现 的 新 功能 。 例 
如 让 旧版 正文 持 ES5 中 的 方法 。 我 们 通常 把 这 类 扩展 叫做 shims 或 者 
polyfills 。 
另外 ， 当 您 用 自 定 义 方 法 扩展 原型 时 ， 首 先 应 该 检查 该 方法 是 否 已 
经 存在 。 这 样 一 来 ， 当 浏览 器 内 存在 同名 内 建 方法 时 ， 我 们 可 以 直接 调 
用 原生 方法 ， 这 就 避免 了 方法 覆盖 。 在 下 面 的 例子 中 ， 我 们 将 为 String 
对 象 添加 trim() 方 法 。 访 方法 是 ES5 标 准 的 一 部 分 ， 但 其 在 老式 浏览 器 中 
并 没有 得 到 支持 : 


if (typeof String.prototype.trim !=== 'function'){ 
































String.prototype.trim = function () { 
return this.replace(/‘\s+|\st+&/g, " ); 

}; 
} 
>" hello ".trimQ; 
"hello" 
最 佳 实践 
如 果 您 想 要 通过 原型 为 茶 个 对 象 添 加 一 个 新 属性 ， 务 必 先 检查 一 下 

该 属性 是 否 已 经 存在 。 
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在 处 理 原型 问题 时 ， 我 们 需要 特别 注意 以 下 两 种 行为 。 

当 我 们 对 原型 对 象 执行 完全 蔡 换 时 ， 可 能 会 触发 原型 链 中 某 种 异常 
Cexception) 。 

prototype.constructor 属性 是 不 可 靠 的 。 

下 面 ， 我 们 来 新 建 一 个 简单 的 构造 器 函数 ， 并 用 它 再 创建 两 个 对 


> function Dog() { 
this.tail = true; 

} 

> var benji = new Dog(); 

> var rusty = new Dog(); 

即便 在 benji 和 rusty 对 象 创建 之 后 ， 我 们 也 依然 能 为 Dog0 的 原型 添 
加 属性 ， 并 且 在 属性 被 添加 之 前 就 已 经 存在 的 对 象 也 可 以 随时 访问 这 些 
新 属性 。 现 在 ， 让 我 们 放 一 个 say0 方 法 进去 : 

> Dog.prototype.say = function(){ 





return 'Woof!'; 
}; 
这 样 ， 上 面 的 两 个 对 象 都 可 以 访问 该 新 方法 了 : 
> benji.say(); 
"Woof!" 
> rusty.say(); 
"Woof!" 
如 果 我 们 检查 一 下 这 些 对 象 构造 右 函 数 ， 就 会 发 现 一 切 正 常 。 
> benji.constructor === Dog; 
true 
> rusty.constructor === Dog; 


true 
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> Dog.prototype = { 

paws: 4, 

hair: true 
i 
事实 证 明 ， 这 会 使 原 有 对 象 不 能 访问 原型 的 新 增 属性 ， 它 们 依然 通 

过 那个 神秘 的 链接 与 原 有 的 原型 对 象 保持 联系 。 

> typeof benji.paws; 
"undefined" 
> benji.say(); 
"Woof!" 
> typeof benji.__proto__.say; 
"function" 
> typeof benji.__proto__.paws; 
"undefined" 
而 我 们 之 后 创建 的 所 有 对 象 使 用 的 都 是 被 更 新 后 的 prototype 对 象 。 
> var lucy = new Dog(); 
> lucy.say(); 
TypeError: lucy.say is not a function 
> lucy.paws; 
4 
并 且 ， 其 秘密 链接 _proto ”也 指向 了 新 的 prototype 对 象 : 
> typeof lucy.__proto__.say; 
"undefined" 
> typeof lucy.__proto__.paws; 
"number" 


但 这 时 候 ， 新 对 象 的 constructor 属 性 就 不 能 再 保持 正确 了 ， 原 本 应 





该 是 Dog() 的 引用 却 指 向 了 Object()。 

> lucy.constructor; 

function Object(){[native code]} 

> benji.constructor; 

function Dog(){ 

this.tail = true; 

} 

当然 ， 我 们 可 以 通过 重新 设置 constructor 属 性 来 解决 上 述 所 有 的 异 
常 行为 : 

> function Dog() {} 

> Dog.prototype = {}; 

> new Dog().constructor === Dog; 

false 

> Dog.prototype.constructor = Dog; 

> new Dog().constructor === Dog; 

true 

最 佳 实践 

当 我 们 重 写 某 对 象 的 prototype 时 ， 需 要 重 置 相应 的 constructor 属 


5.3 本 章 小 结 


现在 ， 让 我 们 来 总 结 一 下 本 章 所 讨论 的 几 个 最 重要 的 话题 : 

在 JavaScript 中 ， 所 有 函数 都 会 拥有 一 个 叫做 prototype 的 属性 ， 默 
认 初 始 值 为 “ 空 ? 对 象 〈 没 有 上 自身 属性 的 对 象 ) 。 

我 们 可 以 在 相关 的 原型 对 象 中 添加 新 的 方法 和 属性 ， 甚 至 可 以 用 自 
定义 对 象 来 完全 蔡 换 掉 原 有 的 原型 对 象 。 

当 我 们 通过 某 个 构造 器 函数 来 新 建 对 象 时 《使 用 new 操作 符 ) ， 这 
些 对 象 就 会 自动 拥有 一 个 指 同 各 自 prototype 属性 的 神秘 链接 ， 并 且 可 
以 通过 它 来 访问 相关 原型 对 象 的 属性 。 

对 象 自身 属性 的 优先 级 要 高 于 其 原型 对 象 中 的 同名 属性 。 

我 们 可 以 通过 hasOwnProperty() 方 法 来 区 分 对 象 上 自身 属性 和 原型 属 

















性 。 

原型 链 的 存在 : 如 果 我 们 在 一 个 对 象 foo 中 访问 一 个 并 不 存在 的 属 
性 bar， 即 当 我 们 访问 foo.bar 时 ，JavaScript 引 擎 就 会 搜索 该 对 象 的 原型 
的 bar 必 性。 如 果 依 然 没 有 找到 bar 属性 ， 则 会 继续 搜索 其 原型 的 原型 ， 
以 此 类 推 ， 直 到 搜索 到 Object.prototype。 

我 们 可 以 对 内 建 的 构造 器 函数 进行 扩展 ， 以 便 所 有 的 对 象 都 能 引用 
我 们 添加 的 功能 。 如 果 将 某 个 函数 赋值 给 Array.prototype.flip， 所 有 的 数 
组 对 象 都 能 立即 增添 一 个 fliip(0) 方 法 ， 如 [12,3].flip0。 另 外 ， 在 添加 相关 
的 方法 和 属性 之 前 ， 应 该 做 一 些 对 已 有 方法 的 检测 工作 ， 这 将 会 大 大 增 
加 脚本 对 于 未 来 环境 的 适应 能 


1. 创建 一 个 名 为 shape 的 对 象 ， 并 为 该 对 象 设置 一 个 type 属 性 和 一 
个 getType() 方 法 。 

2. 定义 一 个 原型 为 shape 的 Triangle0 构 造 器 函数 ， 用 Triangle0) 创 建 
的 对 象 应 该 具有 三 个 对 象 属性 一 一 a、b、c， 分 别 用 于 表示 三 角形 的 三 
Kid. 

3. 在 对 象 原型 中 添加 一 个 名 为 getPerimeter() 的 新 方法 。 

4. 使 用 下 面 的 代码 来 测试 您 之 前 的 实现 : 


> var t = new Triangle(1, 2, 3); 














> t.constructor === Triangle; 
true 
> shape.isPrototypeOf(t); 
true 
> t.getPerimeter(); 
6 
> t.getType(); 
"triangle" 
5. 用 循环 过 历 对 象 tf， 列 出 其 所 有 的 属性 和 方法 《不 包括 原型 部 分 
I) a 
6. 实现 随机 打 乱 函数 shuffle0， 执 行 效果 如 下 : 
> [1,2,3,4,5,6,7,8,9].shuffle0; 
[2, 4, 1, 8, 9, 6, 5, 3, 7] 
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如 果 回 顾 一 下 我 们 在 第 1 章 : 面向 对 象 的 JavaScript 中 所 讨论 的 内 
容 ， 就 会 发 现 ， 我 们 当时 所 列 出 的 、 有 关 JavaScript 中 面 癌 对 象 程序 设计 
的 各 项 话题 ， 现 在 几乎 都 已 经 涉及 了 。 我 们 了 解 了 对 象 、 方 法 与 属性 。 
我 们 也 知道 了 _ JavaScript 中 没有 类 的 概念 ， 但 可 以 用 构造 器 函数 来 实现 
相同 的 功能 。 有 封装 吗 ? 显然 有 ， 对 象 本 身 就 包括 数据 以 及 与 这 些 数据 
有 关 的 行为 ( 即 方法 ) 。 有 聚合 吗 ? 当然 ， 一 个 对 象 中 可 以 包含 其 他 对 
象 ， 事 实 上 也 一 直 如 此 ， 因 为 对 象 方法 是 靠 函 数 来 实现 的 ， 而 函数 本 号 
就 是 对 象 。 

下 面 ， 就 让 我 们 把 焦点 转移 到 有 关 继 承 〈inheritance) 的 部 分 吧 。 
毕竟 这 也 是 个 非常 重要 的 特性 ， 正 因为 有 了 它 ， 我 们 才能 实现 代码 的 重 
用 ， 做 点 偷懒 的 事 ， 这 不 正 是 我 们 从 事 计算 机 程序 设计 的 初衷 吗 ? 

JavaScript 是 一 种 动态 的 程序 设计 语言 ， 因 而 它 对 于 同一 个 任务 往往 
会 同时 存在 几 种 不 同 的 解决 方案 。 在 继承 问题 上 也 不 例外 。 在 本 章 中 ， 
我 们 将 为 您 介绍 一 系列 常见 的 继承 模式 。 只 有 很 好 地 理解 这 些 模式 ， 我 
们 才能 在 具体 的 工程 中 选择 正确 的 模式 或 模式 组 合 。 











6.1 原型 链 


让 我 们 先 从 默认 的 继承 模式 开始 ， 即 通过 原型 来 实现 继承 关系 链 。 

正如 我 们 之 前 所 了 解 的 ，JavaScript 中 的 每 个 函数 中 都 有 一 个 指向 某 
一 对 象 的 prototype 属 性 。 该 函数 被 new 操 作 符 调 用 时 会 创建 并 返回 一 个 
对 象 ， 并 且 该 对 象 中 会 有 一 个 指 癌 其 原型 对 象 的 秘密 链接 。 通 过 该 秘密 
链接 〈 在 某 些 环境 中 ， 该 链接 名 为 proto ) ， 我 们 就 可 以 在 新 建 的 对 
象 中 调用 相关 原型 对 象 的 方法 和 属性 。 

而 原型 对 象 自身 也 具有 对 象 回 有 的 普 过 特征， 因此 本 喘 也 包含 了 指 
癌 其 原型 的 链接 。 由 此 就 形成 了 一 条 链 ， 我 们 称 之 为 原型 链 。 

如 图 6-1 所 示 ， 在 对 象 A 的 一 系列 属性 中 ， 有 一 个 叫做 __proto_ 的 隐 
藏 属性 ， 它 指向 了 男 一 个 对 象 B。 而 B 的 __proto_ Jett CFB XRC, 
以 此 类 推 ， 直 至 链条 末端 的 Object 对 象 ， 该 对 象 是 JavaScript 中 的 最 高 级 
父 对 象 ， 语 言 中 所 有 对 象 都 必须 继承 自 它 。 














这 些 都 很 好 理解 ， 但 这 有 什么 实际 意义 吗 ? 显然 有 ， 正 因为 有 了 这 
些 技术 ， 我 们 才 可 以 在 某 个 属性 不 在 对 象 A 中 而 在 对 象 B 中 时 ， 依 然 将 
它 当 做 A 的 属性 来 访问 。 同 样 的 ， 如 果 对 象 B 中 也 没有 该 属性 ， 还 可 以 
继续 到 对 象 C 中 去 寻找 。 这 就 是 继承 的 作用 ， 它 能 使 每 个 对 象 都 能 访问 
其 继承 链 上 的 任何 一 个 属性 。 

在 后 面 内 容 中 ， 我 们 将 会 演示 一 系列 不 同 的 继承 应 用 ， 这 些 示例 将 
由 一 组 层次 分 明 的 结构 组 成 。 具 体 地 说 ， 就 是 一 组 以 通用 性 对 象 Shape 
为 父 对 象 的 二 维 图 形 对 象 序列 〈 包 括 Triangle、Rectangle 等 ) 。 


6.1.1 原型 链 示 例 








原型 链 是 JavaScript 中 实现 继承 的 默认 方式 。 下 面 ， 我 们 就 用 这 种 
方式 来 实现 之 前 所 插 述 的 层次 结构 吧 ， 首 先 我 们 来 定义 三 个 构造 器 孙 
Bl: 


function Shape(){ 














this.name = 'Shape'’; 
this.toString = function() { 
return this.name; 

}; 

} 

function TwoDShape(){ 
this.name = '2D shape'; 

} 

function Triangle(side, height) { 
this.name = 'Triangle'; 
this.side = side; 


this.height = height; 


this.getArea = function(){ 

return this.side * this.height / 2; 

} 

} 

接 下 来 ， 融 是 我 们 施展 继承 魔法 的 代码 了 : 
TwoDShape.prototype = new Shape(); 





Triangle.prototype = new TwoDShape(); 

明白 上 面 发 生 了 什么 吗 ? 在 这 里 ， 我 们 将 对 象 直 接 创建 在 
TwoDShape ”对 象 的 prototype 属 性 中 ， 并 没有 去 扩展 这 些 对 象 的 原 有 原 
型 。 也 就 是 说 ， 我 们 用 构造 器 Shape0 (通过 new 操作 符 ) 另 建 了 一 个 
新 的 对 象 ， 然 后 用 它 去 覆盖 。” TwoDShape 构造 器 的 prototype 属性。 
Triangle 对 象 也 一 样 ， 它 的 prototype 属性 是 由 构造 器 TwoDShape0O 负 责 
重建 的 (通过 new 操作 符 ) 。 切 记 : JavaScript 是 一 种 完全 依靠 对 象 的 
语言 ， 其 中 没有 类 (cass) 的 概念 。 因 此 我 们 需要 直接 用 new Shape() 
构造 一 个 实体 ， 然 后 才能 通过 该 实体 的 属性 完成 相关 的 继承 工作 ， 而 不 
能 直接 继承 Shape() 构 造 嚣 。 男 外 这 也 确保 了 在 继承 实现 之 后 ， 我 们 对 
Shape(O 所 进行 的 任何 修改 、 重 写 甚 至 有 删除， 都 不 会 对 TwoDShape0 产 生 
影响 ， 因 为 我 们 所 继承 的 只 是 由 该 构造 器 所 建 的 一 个 实体 。 

正如 在 上 一 和 章 中 所 提 到 的 ， 当 我 们 对 对 象 的 prototype 属性 进行 完 
全 蔡 换 时 (这 不 同 于 问 prototype 指 问 的 对 象 添加 属性 ) ， 有 可 能 会 对 对 
象 constructor 属 性 产生 一 定 的 副作用 。 所 以 ， 在 我 们 完成 相关 的 继承 关 
系 设 定 后 ， 对 这 些 对 象 的 constructor 属性 进行 相应 的 重 置 是 一 个 非常 好 
的 习惯 。 

TwoDShape.prototype.constructor = TwoDShape; 

















Triangle.prototype.constructor = Triangle; 
下 面 ， 我 们 来 测试 一 下 目前 为 止 所 实现 的 内 容 ， 先 创建 一 个 
Triangle 对 象 ， 然 后 调用 它 的 getArea0) 方 法 : 


> var my = new Triangle(5, 10); 

> my.getArea(); 

25 

尽管 my 对 象 中 并 没有 属于 自己 的 toString() 方 法 ， 但 我 们 依然 可 以 调 
用 它 所 继承 的 toString0 方 法 。 请 注意 ， 虽 然 我 们 这 里 调用 的 是 一 个 继承 
方法 ， 但 this 所 指向 的 依然 是 my 对 象 。 

> my.toString(); 





"Triangle" 

下 面 ， 我 们 来 关注 一 下 JavaScript 引 擎 在 my.toString() 被 调用 时 究 竞 
做 了 哪些 事 : 

自 先 ， 它 会 抽 历 my 对 象 中 的 所 有 属性 ， 但 没有 找到 一 个 叫做 
toString() 的 方法 。 

接着 再 去 查看 my.__proto__ 所 指 问 的 对 象 ， 该 对 象 应 该 是 在 继承 关 
系 构建 过 程 中 由 new TWwoDShape() 所 创建 的 实体 。 

显然 ，JavaScript 引 擎 在 遍历 TwoDShape 实 体 的 过 程 中 依然 不 会 找到 
toString() 方 法 ， 然 后 ， 它 又 会 继续 检查 该 实体 的 _ proto_ 属 性。 这 时 
候 ， 该 _proto_ 属性 所 指 问 的 实体 是 由 new Shape() 所 创建 的 。 

终于 ， 在 new Shape() 所 创建 的 实体 中 找到 了 toString() 方 法 。 

最 后 ， 该 方法 就 会 在 my 对 象 中 被 调用 ， 并 且 其 this 也 指向 了 my。 

如 果 我 们 同 my 对 象 询问 :“ 您 的 构造 器 函数 是 哪 一 个 ?” 它 应 该 是 能 
够 给 出 正确 答案 的 。 因 为 我 们 在 构建 继承 关系 时 已 经 对 相关 的 
constructor 属 性 进行 了 重 置 。 


> my.constructor === Triangle; 














true 
通过 instanceof 操 作 符 ， 我 们 可 以 验证 my 对 象 同 时 是 上 述 三 个 构造 
器 的 实例 : 


> my instanceof Shape; 


true 

> my instanceof TwoDShape; 

true 

> my instanceof Triangle; 

true 

> my instanceof Array; 

false 

同样 的 ， 当 我 们 以 my 参数 调用 这 些 构造 器 原型 的 isPropertypeOf() 方 
法 时 ， 结 果 也 是 如 此 : 

> Shape.prototype.isPrototypeOf(my); 

true 

> TwoDShape.prototype.isPrototypeOf(my); 

true 

> Triangle.prototype.isPrototypeOf(my); 

true 

> String.prototype.isPrototypeOf(my); 

false 

我 们 也 可 以 用 其 他 两 个 构造 器 来 创建 对 象 ， 用 new TwoDShape()fit 
创建 的 对 象 也 可 以 获得 继承 自 Shape0 的 toString() 方 法 。 

> var td = new TwoDShape(); 

> td.constructor === TwoDShape; 

true 

> td.toString(); 

"2D shape" 

> var s = new Shape(); 

> s.constructor === Shape; 


true 


6.1.2 将 共享 属性 迁移 到 原型 


当 我 们 用 某 一 个 构造 器 创建 对 象 时 ， 其 属性 就 会 被 添加 到 this 中 
去 。 并 且 当 被 添加 的 属性 实际 上 不 会 随 痢 实体 改变 时 ， 这 种 做 法 会 显得 
很 没有 效率 。 辟 如 在 上 面 的 示例 中 ， ShapeO 构 造 器 是 这 样 定 义 的 : 

function Shape(){ 

this.name = 'Shape’; 

这 种 实现 意味 着 我 们 用 new Shape() 创 建 的 每 个 实体 都 会 拥有 一 个 
全 新 的 name 属性 ， 并 在 内 存 中 拥有 上 自己 独立 的 存储 空间 。 而 事实 上 ， 
我 们 也 可 以 选择 将 name 属性 添加 到 原型 上 去 ， 这 样 一 来 所 有 实体 就 可 
以 共享 这 个 属性 了 : 

function Shape() {} 





Shape.prototype.name = 'Shape’; 

这 样 一 来 ， 当 我 们 再 用 new Shape() 新 建 对 象 时 ，name 属性 就 不 再 
是 新 对 象 的 私有 属性 了 ， 而 是 被 添加 进 了 该 对 象 的 原型 中 。 虽 然 这 样 做 
通常 会 更 有 效率 ， 但 这 也 只 是 针对 对 象 实体 中 的 不 可 变 属 性 而 言 的 ， 

对 象 的 共有 方法 尤其 适合 这 种 共享 形式 。 

现在 ， 让 我 们 来 改善 一 下 之 前 的 示例 ， 将 其 所 有 的 方法 和 那些 符合 
条 件 的 属性 添加 到 原型 对 象 中 去 ， 就 Shape0 和 TwoDShape0O 而 言 ， 几 乎 
所 有 东西 都 是 可 以 共享 的 : 


// constructor 














function Shape() {} 

// augment prototype 
Shape.prototype.name = 'Shape’; 
Shape.prototype.toString = function() { 


return this.name; 

}; 

// another constructor 

function TwoDShape(){} 

// take care of inheritance 

TwoDShape.prototype = new Shape(); 

TwoDShape.prototype.constructor = TwoDShape; 

// augment prototype 

TwoDShape.prototype.name = '2D shape’; 

如 您 所 见 ， 我 们 通常 会 在 对 原型 对 象 进行 扩展 之 前 ， 先 完成 相关 的 
继承 关系 构建 ， 否 则 TwoDShape.prototype 中 的 后 续 新 内 容 有 可 能 会 抹 掉 
我 们 所 继承 来 的 东西 。 

而 Triangle 构造 器 的 情况 稍 许 有 些 不 同 ， 因 为 由 new Triangle) Me] 
建 的 各 个 对 象 所 表示 的 三 角形 在 尺寸 上 各 不 相同 。 因 此 ， 访 对象 的 side 
和 height 这 两 个 属性 必须 保持 目 身 所 有 ， 而 其 他 属性 则 可 以 设置 共 孚 。 
例如 ， 方 法 ”getArea() 的 计算 方式 并 不 会 随 着 每 个 Triangle 实 例 而 改变 。 
男 外 ， 需 要 再 强调 一 次 ， 我 们 必须 在 扩展 原型 对 象 之 前 完成 继承 关系 的 
构建 。 

function Triangle(side, height) { 














this.side = side; 

this.height = height; 
} 
// take care of inheritance 
Triangle.prototype = new TwoDShape(); 
Triangle.prototype.constructor = Triangle; 
// augment prototype 


Triangle.prototype.name = Triangle’; 


Triangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 

}; 

修改 完成 之 后 ， 之 前 所 有 的 测试 代码 都 可 以 同样 的 方式 应 用 于 当前 

版 本 ， 例 如 : 

> var my = new Triangle(5, 10); 

> my.getArea(); 

25 

> my.toString(); 

"Triangle" 

如 您 所 见 ， 实 际 上 调用 my.toStringO0 的 区 别 仅仅 存在 于 幕后 的 某 些 
少量 操作 。 主 要 区 别 也 就 是 方法 的 查找 操作 将 更 多 地 发 生 在 
Shape.prototype 中 ， 而 不 再 需要 像 前 面 示例 中 那样 ， 到 由 new Shaper 
创建 的 实体 对 象 中 查找 了 。 

另外 ， 我 们 也 可 以 通过 hasOwnProperty() 方 法 来 明确 对 象 自身 属性 
与 其 原型 链 属 性 的 区 别 。 

> my.hasOwnProperty('side'); 








true 

> my.hasOwnProperty(‘name’); 

false 

而 调用 isPrototypeOfO 方 法 和 instanceof 操 作 符 的 工作 方式 与 之 前 并 
无 区 别 ， 例 如 : 

> TwoDShape.prototype.isPrototypeOf(my); 

true 

> my instanceof Shape; 


true 


6.2 只 继承 于 原型 


正如 上 面 所 说 ， 出 于 效率 考虑 ， 我 们 应 该 尽 可 能 地 将 一 些 可 重用 的 
属性 和 方法 添加 到 原型 中 去 。 如 果 形 成 了 这 样 一 个 好 习惯 ， 我 们 仅仅 依 
靠 原 型 就 能 完成 继承 关系 的 构建 了 。 由 于 原型 中 的 所 有 代码 都 是 可 重用 
的 ， 这 意味 着 继承 自 Shape.prototype 比 继承 自 new ”Shape() 所 创建 的 实体 
要 好 得 多 。 毕 葛 ，new Shape() 方 式 会 将 Shape 的 属性 设 定 为 对 象 自身 属 
性 ， 这 样 的 代码 是 不 可 重用 的 (因而 要 将 其 设置 在 原型 中 ) ， 但 我 们 可 
采取 以 下 方式 对 效率 做 一 些 改善 : 

不 要 单独 为 继承 关系 创建 新 对 象 。 

尽量 减少 运行 时 方法 搜索 《〈 例 如 toStringO) 。 

下 面 就 是 更 改 后 的 代码 ， 我 们 用 加 粗 显示 被 修改 的 部 分 : 

function Shape(){} 














// augment prototype 

Shape.prototype.name = 'shape’; 

Shape.prototype.toString = function() { 
return this.name; 

}; 

function TwoDShape() {} 

// take care of inheritance 

TwoDShape.prototype = Shape.prototype; 

TwoDShape.prototype.constructor = TwoDShape; 

// augment prototype 

TwoDShape.prototype.name = '2D shape’; 

function Triangle(side, height) { 


this.side = side; 
this.height = height; 

} 

// take care of inheritance 

Triangle.prototype = TwoDShape.prototype; 

Triangle.prototype.constructor = Triangle; 

// augment prototype 

Triangle.prototype.name = Triangle’; 

Triangle.prototype.getArea = function(){ 

return this.side * this.height / 2; 

} 

测试 结果 依然 相同 : 

> var my = new Triangle(5, 10); 

> my.getArea(); 

25 

> my.toString(); 

"Triangle" 

但 是 ， 这 样 做 会 令 my.toString() 方 法 的 查找 有 什么 不 同 吗 ? 前 先 ， 
JavaScript 引 擎 同样 会 先 查 看 my 对 象 中 有 没有 toString) 7. AM, E 
不 会 找到 ， 于 是 就 会 转 而 去 搜索 该 对 象 的 原型 属性 。 此 时 该 原型 已 经 指 
癌 了 TwoDShape 的 原型 ， 而 后 者 指 癌 的 又 是 Shape.prototype。 更 重要 的 
是 ， 由 于 这 里 所 采用 的 都 是 引用 传递 而 不 是 值 传递 ， 所 以 这 里 的 方法 奉 
询 步 骤 由 《〈 之 前 示例 中 的 ) 四 步 或 〈 本 章 首 例 中 的 ) 三 步 直接 被 精简 成 
两 步 。 

这 样 简 单 地 拷贝 原型 从 效率 上 来 说 固然 会 更 好 一 些 ， 但 也 有 它 的 副 
作用 。 由 于 子 对 象 与 父 对 象 指向 的 是 同一 个 对 象 ， 所 以 一 旦 子 对 象 对 其 
原型 进行 了 修改 ， 父 对 象 也 会 随即 被 改变 ， 甚 至 所 有 的 继承 关系 也 都 是 





如 此 。 

例如 下 面 这 行 代码 : 

Triangle.prototype.name = Triangle’; 

它 对 name 属 性 进行 了 修改 ， 于 是 Shape.prototype.name 也 随 之 被 改变 
了 。 也 就 是 说 ， 当 我 们 再 用 new Shape() 新 建 对 象 时 ， 新 对 象 的 name 属 性 
也 会 是 Triangle: 


> var s = new Shape(); 











> s.name; 

"Triangle" 

因而 ， 这 种 方法 虽然 效率 更 高 ， 但 在 很 多 应 用 场景 中 并 不 适合 使 
用 。 

临时 构造 器 一 一 new F() 





正如 上 面 所 说 ， 如 果 所 有 prototype ”属性 都 指向 了 一 个 相同 的 对 
象 ， 父 对 象 束 会 受到 子 对 象 属性 的 影响 。 要 解决 这 个 问题 ， 就 必须 利用 
某 种 中 介 来 打破 这 种 连锁 关系 。 我 们 可 以 用 一 个 临时 构造 占 函 数 来 序 当 
中 介 。 即 我 们 创建 一 个 空 函 数 F()， 并 将 其 原型 设置 为 父 级 构造 促 。 然 
后 ， 我 们 既 可 以 用 new F0 来 创建 一 些 不 包含 父 对 象 属性 的 对 象 ， 同 时 又 
可 以 从 父 对 象 prototype 属 性 中 继承 一 切 了 。 

下 面 是 修改 之 后 的 代码 : 

function Shape(){ } 

// augment prototype 

Shape.prototype.name = 'Shape’; 

Shape.prototype.toString = function() { 

return this.name; 
}; 
function TwoDShape() {} 


// take care of inheritance 


var F = function() {}; 
F.prototype = Shape.prototype; 
TwoDShape.prototype = new F(); 
TwoDShape.prototype.constructor = TwoDShape; 
// augment prototype 
TwoDShape.prototype.name = '2D shape’; 
function Triangle(side, height) { 
this.side = side; 
this.height = height; 
} 
// take care of inheritance 
var F = function(){}; 
F.prototype = TwoDShape.prototype; 
Triangle.prototype = new F(); 
Triangle.prototype.constructor = Triangle; 
// augment prototype 
Triangle.prototype.name = Triangle’; 
Triangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 
}; 
下 面 ， 我 们 来 创建 一 个 triangle 对 象 ， 并 测试 其 方法 : 
> var my = new Triangle(5, 10); 
> my.getArea(); 
25 
> my.toString(); 
"Triangle" 


通过 这 种 方法 ， 我 们 就 可 以 保持 住 原 型 链 : 


>my.__proto__ === Triangle.prototype; 

true 

>my.__proto__.constructor === Triangle; 

true 

>my.__proto__.__ proto__ === TwoDShape.prototype; 

true 

>my.__proto__.__ proto__.__ proto__.constructor === Shape; 

true 

FEA SORT BRA JEAN oS POT RI m: 

> var s = new Shape(); 

> s.name; 

"Shape" 

>"Tama"+new TwoDShape(); // calling toString() 

"I am a 2D shape" 

与 此 同时 ， 该 方法 也 对 一 种 意见 提供 了 文 持 : 将 所 有 要 共享 的 属性 
与 方法 添加 到 原型 中 ， 然 后 只 围 纸 原 型 构建 继承 关系 。 也 就 是 说 ， 这 种 
主张 不 鼓励 将 对 象 的 自身 属性 纳入 继承 关系 ， 因 为 自身 属性 往往 随 对 象 
的 不 同 而 差别 其 大 ， 无 法 重用 。 





6.3 uber 一 子 对 象 访问 父 关 K 


在 传统 的 面向 对 象 语言 中 ， 通 常 都 会 提供 一 种 用 于 子 类 访问 父 类 
《有 时 也 叫 超 类 ) 的 特殊 语法 ， 因 为 我 们 在 实现 子 类 方法 往往 需要 其 父 
类 方法 的 额外 辅助 。 在 这 种 情况 下 ， 子 类 通常 就 要 去 调用 父 类 中 的 同名 
方法 ， 以 便 最 终 完成 工作 。 

JavaScript 中 虽然 没有 这 种 特殊 语法 ， 但 是 要 实现 类 似 的 功能 还 是 很 
寻常 的 。 接 下 来 ， 让 我 们 再 对 之 前 的 示例 做 一 些 修改 ， 在 构建 继承 关系 
的 过 程 中 引入 一 个 uber 属性 ， 并 令 其 指向 其 父 级 原型 对 象 : 

function Shape(){} 





// augment prototype 
Shape.prototype.name = 'shape’; 
Shape.prototype.toString = function(){ 
var const = this.constructor; 
return const.uber 
? this.const.uber.toString() + ', ' + this.name 
: this.name; 
}; 
function TwoDShape(){} 
// take care of inheritance 
var F = function(){}; 
F.prototype = Shape.prototype; 
TwoDShape.prototype = new F(); 
TwoDShape.prototype.constructor = TwoDShape; 
TwoDShape.uber = Shape.prototype; 


// augment prototype 

TwoDShape.prototype.name = '2D shape’; 

function Triangle(side, height) { 

this.side = side; 
this.height = height; 

} 

// take care of inheritance 

var F = function(){}; 

F.prototype = TwoDShape.prototype; 

Triangle.prototype = new F(); 

Triangle.prototype.constructor = Triangle; 

Triangle.uber = TwoDShape.prototype; 

// augment prototype 

Triangle.prototype.name = Triangle’; 

Triangle.prototype.getArea = function(){ 

return this.side * this.height / 2; 

i 

在 这 里 ， 我 们 主要 新 增 了 以 下 内 容 : 

将 uber 属 性 设置 成 指 辐 其 父 级 原型 的 引用 。 

对 toString0) 方 法 进行 了 更 新 。 

在 此 之 前 ，toStringO 所 做 的 仅仅 是 返回 this.name 的 内 容 而 已 。 现 
在 我 们 为 它 新 增 了 一 项 额外 任务 ， 即 检查 对 象 中 是 否 存在 
this.constructor.uber 属 性 ， 如 果 存 在 ， 束 先 调用 该 属性 的 toString 方 法 。 
由 于 this.constructor 本 里 是 一 个 函数 ， 而 this.constructor.uber 则 是 指 癌 当 
前 对 象 父 级 原型 的 引用 ， 所 以 当 我 们 调用 Triangle 实 体 的 toString() 方 法 
时 ， 其 原型 链 上 所 有 的 toString() 都 会 被 调用 : 


> var my = new Triangle(5, 10); 





> my.toString(); 

"shape, 2D shape, Triangle" 

另外 ，uber 属 性 的 名 字 原 本 应 该 是 “<superclass”， 但 这 样 一 来 好 像 显 
得 JavaScript 中 有 了 类 的 概念 ， 或 许 应 该 叫做 “super”〈 就 像 Java 那 样 ) ， 
但 super 一 词 在 JavaScript 中 属于 保留 字 。 因 而 ，Douglass Crockford 建议 
采用 德语 中 与 “super" 同 义 的 词 *iber”， 这 个 主意 看 起 来 不 错 ， 挺 酷 的 。 





下 面 ， 我 们 要 将 这 些 实现 继承 关系 的 代码 提 烁 出来， 并 迁 入 一 个 叫 
做 extend0 的 可 重用 函数 中 : 
function extend(Child, Parent) { 
var F = function(){}; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 
通过 应 用 上 面 的 函数 《读者 也 可 以 目 行 再 定义 一 个 ) ， 我 们 既 可 以 
使 代码 保持 简洁 ， 又 能 将 其 重用 在 构建 继承 关系 的 任务 中 。 这 种 方式 让 
我 们 能 通过 以 下 简单 的 调用 来 实现 继承 : 
extend(TwoDShape, Shape); 
以 及 : 
extend(Triangle, TwoDShape); 
下 面 我 们 来 看 一 个 完整 的 例子 : 


// inheritance helper 





function extend(Child, Parent) { 
var F = function () {}; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 


} 
// define -> augment 
function Shape() {}; 
Shape.prototype.name = 'Shape’; 
Shape.prototype.toString = function () { 
return this.constructor.uber 
? this.constructor.uber.toString() + ', ' + this.name 
: this.name; 
}; 
// define -> inherit -> augment 
function TwoDShape() {}; 
extend(TwoDShape, Shape); 
TwoDShape.prototype.name = '2D shape’; 
// define 
function Triangle(side, height) { 
this.side = side; 
this.height = height; 
} 
// inherit 
extend(Triangle, TwoDShape); 
// augment 
Triangle.prototype.name = Triangle’; 
Triangle.prototype.getArea = function () { 
return this.side * this.height / 2; 
ie 
测试 : 
> new Triangle().toString(); 


"Shape, 2D shape, Triangle" 


6.5 属性 找 贝 


接 下 来 ， 让 我 们 尝试 一 个 与 之 前 略 有 不 同 的 方法 。 在 构建 可 重用 的 
继承 代码 时 ， 我 们 也 可 以 简单 地 将 父 对 ee 象 ， 参 照 之 
前 的 extend0O 接 口 ， 我 们 可 以 创建 一 个 extend20 函 数 ， 该 函数 也 接受 两 
个 构造 器 函数 为 参数 ， 并 将 Parent 的 原型 的 所 有 属性 ee eee 
的 原型 ， 其 中 包括 方法 ， 因 为 方法 本 身 也 是 一 种 函数 类 型 的 属性 。 

function extend2(Child, Parent) { 


var p = Parent.prototype; 








var c = Child.prototype; 
for (var i in p) { 
cli] = plil; 
} 
c.uber = p; 

} 

如 您 所 见 ， 我 们 通过 一 个 简单 的 循环 裔 历 了 函数 所 接受 的 所 有 属 
性 。 在 之 前 的 示例 中 ， 如 果子 对 象 需要 访问 父 对 象 的 方法 ， 我 们 可 以 通 
过 设置 uber 属性 来 实现 。 而 这 里 的 情况 与 之 前 有 所 不 同 ， 由 于 我 们 已 
经 完成 对 Child 的 原型 进行 扩展 ， 不 需要 再 去 重 置 Child. 
prototype.constructor 属性 ， 因 为 它 不 会 再 被 完 全 和 窗 六 了， 因此 在 这 里 
constructor) HE ATFs [Al AY ne E 的 。 

与 之 前 的 方法 相 比 ， 这 个 方法 在 效率 上 略 进 一 筹 。 因 为 这 里 执行 的 
是 子 对 象 原 型 的 逐一 拷贝 ， 而 非 简单 的 原型 链 碍 询 。 所 以 我 们 必须 要 记 
住 ， 这 种 方式 仅 适 用 于 只 包含 基本 数据 类 型 的 对 象 ， 所 有 的 对 象 类 型 

(包括 函数 与 数组 ) 都 是 不 可 复制 的 ， 因 为 它们 只 文 持 引用 传递 。 














下 面 我 们 来 看 看 具体 的 应 用 示例 ， 以 下 有 两 个 构造 器 函数 ShapeO0 和 
TwoDShape0。 其 中 ，Shape0 的 原型 中 包含 了 一 个 基本 类 型 属性 name, 
和 一 个 非 基 本 类 型 属性 toString() 方 法 : 


var Shape = function(){}; 





var TwoDShape = function(){}; 

Shape.prototype.name = 'shape’; 

Shape.prototype.toString = function(){ 

return this.uber 
? this.uber.toString() + ',' + this.name 
: this.name; 

} 

如 果 我 们 通过 extend(0) 方 法 来 实现 继承 ， 那 么 name 属 性 既 不 会 是 
TwoDShapeO 实 例 的 属性 ， 也 不 会 成 为 其 原型 对 象 的 属性 ， 但 是 子 对 象 
依然 可 以 通过 继承 方式 来 访问 该 属性 。 

> extend(TwoDShape, Shape); 

> var td = new TwoDShape(); 

> td.name; 

"shape" 

> TwoDShape.prototype.name; 

"shape" 

> td.__proto__.name; 

"shape" 

> td.hasOwnProperty(‘name’); 

false 

> td.__proto__.hasOwnProperty(‘name'); 

false 


而 如 果 继 承 是 通过 extend20) 方 法 来 实现 的 ，TwoDShape() 的 原型 中 





就 会 拷贝 获得 属于 自己 的 name 属 性 。 同 样 的， 其 中 也 会 拷贝 属于 自己 的 
toStringO0 方 法 ， 但 这 只 是 一 个 函数 引用 ， 函 数 本 喘 并 没有 被 再 次 创建 。 

> extend2(TwoDShape, Shape); 

> var td = new TwoDShape(); 

> td.__proto__.hasOwnProperty(‘name'); 

true 

> td.__proto__.hasOwnProperty(‘toString’); 

true 

> td.__proto__.toString === Shape.prototype.toString; 

true 

如 您 所 见 ， 上 面 两 个 toString(O 方 法 实际 是 同一 个 函数 对 象 。 之 所 以 
这 样 做 ， 也 是 因为 这 样 的 方法 重建 其 实 是 完全 没有 必要 的 。 

所 以 ， 之 所 以 说 extend2() 方 法 的 效率 要 低 于 extend() 方 法 ， 主 要 是 前 
者 对 部 分 原型 属性 进行 了 重建 。 当 然 了 ， 这 对 于 只 包含 基本 数据 类 型 的 
对 象 来 说， 未 必 真 的 就 如 此 精 糕 。 而 且 ， 这 样 做 还 能 使 属性 查找 操作 更 
多 地 停留 在 对 象 本 喘 ， 从 而 可 减少 原型 链 上 的 查找 。 

现在 ， 让 我 们 再 来 回顾 一 下 定义 uber 属性 的 整个 过 程 。 这 一 次 的 
做 法 有 别 于 之 前 的 通过 Parent 构 造句 赋值 ， 这 里 我 们 是 将 Parent 的 
prototype 属 性 赋值 给 了 变量 p， 再 通过 p 来 完成 uber 赋 值 的 。 之 所 以 要 故 
意 做 出 这 种 差异 化 实现 只 是 为 了 说 明 ， 您 可 以 根据 自己 的 需要 来 使 用 您 
目 己 认为 合适 的 继承 模式 。 让 我 们 来 测试 一 下 代码 : 

> td.toString(); 























"Shape, Shape" 

TwoDShape 并 没有 重新 定义 name 属 性 ， 所 以 在 这 里 打印 了 两 个 
Shape。 您 可 以 在 任何 时 候 重 新 定义 name 属 性 ， 然 后 所 有 的 实例 都 会 立 
即 “ 看 见 *name 属 性 的 更 新 : 

> TwoDShape.prototype.name = "2D shape"; 


> td.toString(); 
"Shape, 2D shape" 


6.6 请 小 心 处 所 内 


事实 上 ， 对 象 类 型 (包括 函数 与 数组 ) 通常 都 是 以 引用 形式 来 进行 
找 贝 的 ， 这 有 时 会 导致 一 些 与 预期 不 同 的 结 

下 面 ， 我 们 来 创建 两 个 构造 器 函数 ， 并 在 第 一 个 构造 器 的 原型 中 添 
加 一 些 属性 : 

> function Papa() {} 

> function Wee() {} 

> Papa.prototype.name = 'Bear'; 

> Papa.prototype.owns = ["porridge", "chair", "bed" ]; 

现在 ， 我 们 让 Wee 继 承 Papa (通过 extend() 或 extend2() 来 实现 ) : 

> extend2(Wee, Papa); 

这 里 使 用 的 是 extend2()， 即 Wee 的 原型 继承 了 Papa 的 原型 属性 ， 
并 将 其 变 成 了 自身 属性 。 

> Wee.prototype.hasOwnProperty('name'); 

true 

> Wee.prototype.hasOwnProperty('owns'); 

true 

其 中 ，name 属 于 基本 类 型 属性 ， 创 建 的 是 一 份 全 新 的 找 贝 。 而 
owns 属 性 是 一 个 数组 对 象 ， 它 所 执行 的 是 引用 拷贝 : 

> Wee.prototype.owns; 

["porridge", "chair", "bed"] 

> Wee.prototype.owns === Papa.prototype.owns; 


true 


如 果 改 变 Wee 中 的 name 属 性 ， 不 会 对 Papa 产 生 影响 : 


> Wee.prototype.name += ', Little Bear’; 

"Bear, Little Bear" 

> Papa.prototype.name; 

"Bear" 

但 如 果 改 变 的 是 wee 的 owns 属 性 ，Papa 就 会 受到 影响 了 ， 因 为 这 两 
个 属性 在 内 存 中 引用 的 是 同一 个 数组 : 

> Wee.prototype.owns.pop(); 

"bed" 


> Papa.prototype.owns; 








["porridge", "chair" 

当然 ， 如 果 我 们 用 另 一 个 对 象 对 Wee 的 owns 属 性 进行 完全 重 写 〈 而 
不 是 修改 现 有 属性 ) ， 事 情 就 完全 不 一 样 了 。 在 这 种 情况 下 ，Papa 的 
owns 属 性 会 继续 引用 原 有 对 象 ， 而 Wee 的 owns 属 性 则 指 加 了 新 的 对 象 。 


> Wee.prototype.owns = ["empty bowl", "broken chair" J]; 





> Papa.prototype.owns.push(‘bed’); 

> Papa.prototype.owns; 

["porridge", "chair", "bed" 

这 里 的 主要 思想 是 ， 当 茶 些 东西 被 创建 为 一 个 对 象 时 ， 它 们 就 被 存 
储 在 内 存 中 的 某 个 物理 位 置 ， 相 关 的 变量 和 属性 就 会 指向 这 些 位 置 。 而 
当 我 们 将 一 个 新 对 象 赋值 给 Wee.prototype.owns 时 ， 就 相当 于 告诉 
它 :“ 咀 ， 扎 了 那个 日 对 象 吧 ， 人 快 将 指针 转移 到 现在 这 个 新 对 象 上 来 ”。 

下 面 ， 我 们 可 以 通过 图 6-2 来 了 解 一 下 内 存 中 对 象 的 储存 情况 。 内 
存 中 所 存储 的 对 象 通常 会 整齐 排列 ， 看 上 去 就 像 一 面 用 砖头 堆 起 来 的 
墙 。 而 我 们 的 变量 则 是 一 些 指 问 这 些 对 象 的 指针 。 该 图 中 展示 出 了 以 下 
几 种 情况 : 

@ 创建 一 个 新 对 象 ， 并 且 让 变量 A 指向 该 对 象 。 

令 创建 一 个 新 变量 B， 并 设置 其 与 A 相等 。 也 就 是 说 ， 现 在 B 和 A 指 














问 了 同一 个 对 象 ， 也 就 是 内 存 中 的 同一 个 位 置 。 

@ 修改 变量 B 所 指 对 象 的 color 必 性， 将 它 设置 为 "white"。 在 图 中 ， 
对 应 的 砖 就 形象 地 变 为 了 白色 。 如 果 现 在 我 们 执行 检查 A.color === 
"white", 279 2lltrue. 

@ 再 创建 一 个 新 对 象 ， 然 后 让 变量 B 指 癌 这 个 新 对 象 。 这 样 一 来 ， 
由 于 A 和 B 指 向 了 内 存 中 的 不 同位 置 ， 所 以 它们 之 间 已 经 完全 没有 联 
系 ， 对 它们 之 中 任何 一 个 所 做 的 更 改 都 不 会 影响 男 一 个 。 





B .code=”white”: 





图 6-2 
如 果 您 想 解 决 引用 找 贝 方法 无 法 解决 的 问题 ， 那 么 也 许 应 该 考虑 深 
度 拷 贝 方法 。 对 此 我 们 将 在 以 后 进行 讨论 。 








到 目前 为 止 ， 本 章 所 有 的 示例 都 是 以 构造 器 创建 对 象 为 前 提 的 ， 并 
且 ， 我 们 在 这 些 用 于 创建 对 象 的 构造 器 中 引入 了 从 其 他 构造 器 中 继承 而 
来 的 属性 。 但 实际 上 ， 我 们 也 可 以 丢 开 构造 器 ， 直 接 通 过 对 象 标识 法 来 
创建 对 象 ， 并 且 这 样 做 还 能 减少 我 们 的 实际 输入 。 但 是 ， 它 们 是 如 何 实 
现 继承 的 呢 ? 

在 Java 或 PHP 中 ， 我 们 是 通过 类 定义 来 构建 不 同类 之 间 的 继承 关系 
的 。 上 所 谓 传统 意义 上 的 面 癌 对 象 是 依靠 类 来 完成 的 。 但 JavaScript 中 没 
有 类 的 概念 ， 因 此 ， 那 些 具 有 传统 编程 背景 的 程序 员 自 然而 然 地 会 将 构 
造 器 函数 当做 类 ， 因 为 两 者 在 使 用 方式 上 是 最 为 接近 的 。 此 外 ， 
JavaScript 中 也 提供 了 new 操 作 符 ， 这 使 得 JavaScript 与 Java 的 相似 程度 更 
为 接近 。 无 论 如 何 ， 所 有 的 一 切 最 终 都 要 回 到 对 象 层面 上 来 。 例 如 在 本 
章 的 第 一 个 示例 中 ， 我 们 使 用 的 语法 是 这 样 的 : 

Child.prototype = new Parent(); 

RK RIN Child Midas CHEAT DORA) 是 从 Parent 继 承 而 
来 的 ， 但 对 象 本 身 则 是 通过 new ParentO 调 用 来 创建 的 。 这 就 是 为 什么 我 
们 说 这 是 一 种 仿 传统 的 继承 模式 ， 它 尽管 很 像 传统 继承 ， 但 终究 不 是 

《因为 这 里 不 存在 任何 类 的 调用 ) 。 

那么 ， 我 们 为 什么 不 能 拿 挥 这 个 中 间 人 【〔 即 构造 器 /类 ) ， 直 接 在 
对 象 之 间 构 建 继承 关系 昵 ? 在 extend20) 方 法 中 ， 父 原型 对 象 的 属性 被 逐 
一 拷贝 给 了 子 原 型 对 象 ， 而 这 两 个 原型 本 质 上 也 都 是 对 象 。 接 下 来 ， 让 
我 们 将 原型 和 构造 器 二 了 ， 符 试 在 对 象 之 间 进 行 直接 属性 拷贝 吧 。 

首先 ， 我 们 用 var o = 人 语句 创建 一 个 没有 任何 私有 属性 的 “ 空 ”对 象 
作为 “画板 ”， 然 后 再 逐步 为 其 添加 属性 。 但 这 次 我 们 不 通过 this RK 
































现 ， 而 是 直接 将 现 有 对 象 的 属性 全 部 拷贝 过 来 。 例 如 在 下 面 的 实现 中 ， 
函数 将 接受 一 个 对 象 并 返回 它 的 副本 。 
function extendCopy(p) { 
var c = {}; 
for (var i in p) { 
cli] = plil; 
} 
c.uber = p; 
return C; 
} 
单纯 的 属性 全 找 贝 是 一 种 非常 简单 直接 的 模式 ， 但 适用 范围 很 广 。 
下 面 来 看 看 extendCopyO 的 实际 应 用 。 首 先 ， 我 们 需要 一 个 基本 对 象 : 


var shape = { 





name: 'Shape', 
toString: function() { 
return this.name; 
} 
ie 
FAS ANT AY AAR HR PIA OR BE — PATA. Ai val A 
extendCopy0O 函 数 ， 访 函数 会 返回 一 个 新 对 象 。 然 后 ， 我 们 可 以 继续 对 
这 个 新 对 象 进行 扩 展 ， 添 加 额外 的 功能 。 
var twoDee = extendCopy(shape); 
twoDee.name = '2D shape'; 
twoDee.toString = function(){ 
return this.uber.toString() + ', ' + this.name; 
}; 
下 面 ， 我 们 让 triangle 对 象 继承 一 个 2D 图 形 对 象 : 


var triangle = extendCopy(twoDee); 

triangle.name = 'Triangle'; 

triangle.getArea = function(){ 

return this.side * this.height / 2; 

}; 

使 用 该 triangle: 

> triangle.side = 5; 

> triangle.height = 10; 

> triangle.getArea(); 

25 

> triangle.toString(); 

"shape, 2D shape, Triangle" 

对 于 这 种 方法 而 言 ， 可 能 的 问题 就 在 于 初始 化 一 个 新 triangle 对 象 的 

过 程 过 于 繁琐 。 因 为 我 们 必须 要 对 该 对 象 的 side 和 height 值 进行 手动 设 

置 ， 这 与 之 前 直接 将 相关 的 值 作为 参数 传递 给 构造 占 函 数 是 不 一 样 的 。 
但 这 方面 的 问题 只 需要 调用 一 个 函数 就 能 轻易 解决 ， 例 如 与 构造 器 函数 
类 似 的 init0 方 法 (如 果 您 使 用 PHP5， 可 调用 __construct() 函 数 ) ， 我 们 
只 需要 在 调用 时 将 这 两 个 值 以 参数 形式 传递 给 它 即 可 。 又 或 者 ， 我 们 可 
以 将 extendCopy0) 函 数 设计 为 接收 两 个 参数 ， 第 一 个 参数 不 变 ， 第 二 个 
参数 是 包含 我 们 需要 的 额外 属性 的 对 象 ， 然 后 我 们 就 可 以 在 函数 体 中 ， 
使 用 这 些 额外 属性 对 所 返回 的 拷贝 进行 扩展 ， 或 者 换 一 种 说 法 ， 将 第 一 
个 参数 的 找 贝 与 第 二 个 参数 合并 。 











6.8 PRY U] 


在 之 前 的 讨论 中 ，extendCopy0 函 数 以 及 再 之 前 的 ”extend20 函 数 所 
用 的 创建 方式 叫做 浅 找 贝 (shallow copy) 。 与 之 相对 的 ， 当 然 就 是 所 
WAVES VL (deep copy) 了 。 经 过 之 前 章节 〈 即 6.6) 的 讨论 ， 我 们 已 
经 知 cence 实际 上 拷贝 的 只 是 该 对 象 在 内 存 中 的 位 置 指 
针 。 这 一 过 程 束 是 所 谓 的 浅 拷 贝 ， 在 这 种 情况 下 ， 如 果 我 们 修改 了 找 贝 
We 就 等 同 于 修改 了 原 对 象 。 而 深 找 贝 则 可 以 帮助 我 们 避免 这 方面 的 
问题 。 

深 拷贝 的 实现 方式 与 浅 拷贝 基本 相同 ， 也 需要 通过 过 历 对 象 的 属性 
来 进行 拷贝 操作 。 只 是 在 过 到 一 个 对 象 引 用 性 的 属性 时 ， 我 们 需要 再 次 
对 其 调用 深 拷 贝 函数 : 

function deepCopy(p, c) { 

C=C |l he 


for (vari in p) { 








if (p.hasOwnProperty(i)) { 
if (typeof pli] === 'object') { 
cli] = Array.isArray(p[i]) ? [] : {}; 
deepCopy(pli], cli); 
} else { 
cli] = plil; 


} 


return C; 


} 
现在 我 们 来 创建 一 个 对 象 ， 该 对 象 包含 数组 和 子 对 象 : 
var parent = { 
numbers: [1, 2, 3], 
letters: ['a', 'b', 'c'], 
obj: { 
prop: 1 
bs 
bool: true 
} 
TFH, RIDIRE DUS DUMP MERMA AS 
同 。 在 深 找 贝 中 ， 对 拷贝 对 象 的 numbers 属 性 进行 更 新 不 会 对 原 对 象 产 


> var mydeep = deepCopy(parent); 
> var myshallow = extendCopy(parent); 
> mydeep.numbers.push(4,5,6); 

6 

> mydeep.numbers; 

[1, 2, 3, 4, 5, 6] 

> parent.numbers; 

[1, 2, 3] 

> myshallow.numbers.push(10); 

4 

> myshallow.numbers; 

[1, 2, 3, 10] 

> parent.numbers; 

[1, 2, 3, 10]; 


> mydeep.numbers; 

[1, 2, 3, 4, 5, 6] 

使 用 deepCopy0O 函 数 要 注意 两 点 。 

@ 在 拷贝 每 个 属性 之 前 ， 建 议 使 用 hasOwnProperty0 来 确认 不 会 误 
找 贝 不 需要 的 继承 属性 。 

© 由 于 区 分 Array 对 象 和 普通 Object HARA SAH, PTL, ESS 标 
准 中 实现 了 Array.isArray0 函 数 。 这 个 路 浏览 器 的 最 佳 解 决 方案 〈 换 句 
话说 ， 为 仅 支 持 ES3 的 环境 提供 isArray0 函 数 ) 虽然 看 起 来 有 点 取 巧 ， 
但 却 是 有 效 的 。 


if (Array.isArray !== "function") { 





Array.isArray = function (candidate) { 
return 
Object.prototype.toString.call(candidate) === '[object Array]'; 
i 
} 


6.9 object() 


基于 这 种 在 对 象 之 间 直 接 构 建 继承 关系 的 理念 ，Douglas Crockford 
为 我 们 提出 了 一 个 建议 ， 即 可 以 用 object0 函 数 来 接收 父 对 象 ， 并 返回 一 
个 以 该 对 象 为 原型 的 新 对 象 。 
function object(o) { 
function F() {} 
F.prototype = 0; 





return new F(); 
} 
如 果 我 们 需要 访问 uber 属 性 ， 可 以 继续 object0 函 数 ， 有 具体 如 下 : 
function object(o) { 
var n; 
function F() {} 
F.prototype = 0; 
n = new FQ); 
n.uber = 0; 
return n; 
这 个 函数 的 使 用 与 extendCopyO 基 本 相同 : 我 们 只 需要 将 某 个 对 象 
(例如 twoDee) 传递 给 它 ， 并 由 此 创建 一 个 新 对 象 。 然 后 再 对 新 对 象 进 
行 后 续 的 扩展 处 理 。 
var triangle = object(twoDee); 
triangle.name = 'Triangle'; 


triangle.getArea = function(){ 


return this.side * this.height / 2; 

ti 

新 triangle 对 象 的 行为 依然 不 变 : 

> triangle.toString() 

"shape, 2D shape, Triangle" 

这 种 模式 也 被 称 为 原型 继承 ， 因 为 在 这 里 ， 我 们 将 父 对 象 设置 成 了 
子 对 象 的 原型 。 这 个 object0) 函 数 被 ES5 所 采纳 ， 并 且 更 名 为 
Object.create()。 例 如 : 


> var square = Object.create(triangle); 


6.10 E AY ak 7K 5 EE WAVE DY 


对 于 继承 来 说 ， 主 要 目标 就 是 将 一 些 现 有 的 功能 归 为 已 有 。 也 就 是 
说 ， 我 们 在 新 建 一 个 对 象 时 ， 通 常 首 先 应 该 继承 于 现 有 对 象 ， 然 后 再 为 
其 添加 额外 的 方法 与 属性 。 对 此 ， 我 们 可 以 通过 一 个 函数 调用 来 完成 ， 
并 且 在 其 中 混合 使 用 我 们 刚才 所 讨论 的 两 种 方式 。 

具体 而 言 就 是 : 

使 用 原型 继承 的 方式 ， 将 一 个 已 有 对 象 设置 为 新 对 象 的 原型 。 

新 建 一 个 对 象 后 ， 将 另 一 个 已 有 对 象 的 所 有 属性 拷贝 过 来 。 

function objectPlus(o, stuff) { 

var n; 

function FO {} 

F.prototype = 0; 

n = new F(); 

n.uber = 0; 

for (var i in stuff) { 
nli] = stuff[i]; 

} 

return n; 

这 个 函数 接受 两 个 参数 ， 其 中 对 象 o 用 于 继承 ， 而 另 一 个 对 象 stuff 
则 用 于 拷贝 方法 与 属性 。 下 面 我 们 来 看 看 实际 应 用 。 

首先 ， 需 要 一 个 基本 对 象 shape: 


var shape = { 











name: 'shape’, 


toString: function() { 
return this.name; 
} 
ie 
接着 再 创建 一 个 继承 于 shape 的 2D 对 象 ， 并 为 其 添加 更 多 的 属性 。 
这 些 额 外 的 属性 由 一 个 用 文本 标识 法 所 创建 的 匿名 对 象 提供 。 
var twoDee = objectPlus(shape, { 
name: '2D shape’, 
toString: function(){ 
return this.uber.toString() + ', ' + this.name; 
} 
}; 
现在 ， 我 们 来 创建 一 个 继承 于 2D 对 象 的 triangle 对 象 ， 并 为 其 添加 
一 些 额外 的 属性 。 
var triangle = objectPlus(twoDee, { 
name: "Triangle'’, 
getArea: function(){ 
return this.side * this.height / 2; 
ts 
side: 0, 
height: 0 
}; 
下 面 我 们 来 测试 一 下 : 创建 一 个 具体 的 triangle AR my, FAE 
其 side 和 height 属 性 。 
> var my = objectPlus(triangle, { 
side: 4, height: 4 
}); 


> my.getArea(); 

8 

> my.toString(); 

"shape, 2D shape, Triangle, Triangle" 

这 里 的 不 同 之 处 在 于 ， 当 toString(0) 函 数 被 执行 时 ，Triangle 的 name 
属性 会 被 重复 两 次 。 这 是 因为 我 们 在 具 现 化 实例 时 是 继承 于 triangle 对 象 
的 ， 所 以 这 里 多 了 一 层 继承 关系 。 我 们 也 可 以 给 该 实例 一 个 新 的 name 属 
性 。 例 如 : 

> objectPlus(triangle, { 

side: 4, 

height: 4, 

name: 'My 4x4' 

}).toString(); 

"Shape, 2D shape, Triangle, My 4x4" 

这 里 的 objectPlus() 函 数 的 实现 方式 比 起 之 前 提 到 的 objectO 更 接近 
ES5 的 Object.create()。 只 是 ES5 的 实现 中 ， 附 加 属性 (也 就 是 第 二 个 参 
ZO 是 通过 属性 描述 符 提 供 的 〈 见 附录 C: 内 建 对 象 ) 。 
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所 谓 的 多 重 继承 ， 通 常 指 的 是 一 个 子 对 象 中 有 不 止 一 个 父 对 象 的 继 
承 模 式 。 对 于 这 种 模式 ， 有 些 面 向 对 象 程序 语言 支持 ， 有 些 则 不 支持 。 
我 们 可 以 对 它们 进行 一 些 村 别 ， 自 行 判断 在 复杂 的 应 用 程序 设计 中 多 重 
继承 是 否 能 带 来 方便 ， 或 者 是 否 有 这 种 必要 使 用 它 ， 以 及 它 是 否 会 比 原 
型 链 的 方式 更 好 。 但 无 论 如 何 ， 对 于 JavaScript 这 样 的 动态 语言 来 说 ， 
实现 多 重 继承 是 很 简单 的 ， 尽 管 语 言 本 身 没 有 为 此 提供 特殊 的 语法 单 
元 。 现 在 ， 让 我 们 暂且 先 离 开 一 下 这 个 讨论 多 重 继承 利 次 的 漫漫 长 夜 ， 
去 实现 中 感受 一 下 多 重 继承 的 用 法 吧 。 

多 重 继承 实现 是 极其 简单 的 ， 我 们 只 需要 延续 属性 拷贝 法 的 继承 思 
路 依次 扩展 对 象 即 可 ， 而 对 参数 中 所 继承 的 对 象 的 数量 没有 限制 。 

下 面 ， 我 们 来 创建 一 个 multiO0 函 数 ， 它 可 以 接受 任意 数量 的 输入 性 
对 象 。 然 后 ， 我 们 在 其 中 实现 了 一 个 双重 循环 ， 内 层 循环 用 于 拷贝 属 
性 ， 而 外 层 循环 则 用 于 遍历 函数 参数 中 所 传递 进来 的 所 有 对 象 。 


function multi() { 























var n = {}, stuff, j = 0, len = arguments.length; 
for (j = 0; j < len; j++) { 

stuff = arguments[j]; 

for (var i in stuff) { 

if(stuff has Own Property(1) ){ 

nli] = stuff[i]; 

} 
} 


return n; 


} 
现在 来 测试 一 下 : 首先 ， 我 们 需要 创建 shape、twoDee 以 及 一 个 匿 
名 对 象 。 然 后 调用 multiO 函 数 ， 将 这 三 个 对 象 作为 参数 传递 ， 该 函数 会 
返回 新 建 的 triangle 对 象 。 
var shape = { 
name: 'shape’, 
toString: function() { 
return this.name; 
} 
}; 
var twoDee = { 
name: '2D shape’, 
dimensions: 2 
} 
var triangle = multi(shape, twoDee, { 
name: 'Triangle', 
getArea: function(){ 
return this.side * this.height / 2; 
}, 
side: 5, 
height: 10 
}); 
然后 ， 让 我 们 来 看 看 它 是 否 可 以 工作 。getArea() 方 法 应 该 是 独 有 属 
性 ，dimensions 则 应 该 是 自 twoDee 而 来 的 继承 属性 ，toStringO 则 是 从 
shape 继 承 而 来 的 : 
> triangle.getArea(); 
25 





> triangle.dimensions; 

2 

> triangle.toString(); 

"Triangle" 

要 注意 的 是 ，multi0 中 的 循环 是 按照 对 象 的 输入 顺序 来 进行 过 历 
的 。 如 果 其 中 两 个 对 象 拥 有 相同 的 属性 ， 前 一 个 就 会 被 后 一 个 禾 普 。 

混合 插入 

在 这 里 ， 我 们 需要 了 解 一 种 叫做 混合 插入 “mixins) 的 技术 。 我 们 
可 以 将 其 看 做 一 种 为 对 象 提供 茶 些 实用 功能 的 技术 ， 只 不 过 ， 它 并 不 是 
通过 子 对 象 的 继承 与 扩展 来 完成 的 。 我 们 之 前 所 讨论 的 多 重 继 承 实际 上 
正 是 基于 这 种 技术 理念 来 实现 的 。 也 就 是 说 ， 每 当 我 们 新 建 一 个 对 象 
时 ， 可 以 选择 将 其 他 对 象 的 内 容 混 合 到 我 们 的 新 对 象 中 去 ， 只 要 将 它们 
全 部 传递 给 multiO0 函 数 ， 我 们 就 可 以 在 不 建立 相关 继承 关系 树 的 情况 下 
获得 这 些 对 象 的 功能 





6.12 寄生 式 继承 


JavaScript 中 能 够 实现 继承 的 方式 有 很 多 。 如 果 您 渴望 多 了 解 一 些 这 
方面 的 知识 ， 这 里 可 以 再 为 您 介绍 一 种 叫做 寄生 式 继 承 的 模式 。 这 是 由 
Douglas Crockford 所 提出 的 技术 ， 基 本 思路 是 ， 我 们 可 以 在 创建 对 象 的 
函数 中 直接 吸收 其 他 对 象 的 功能 ， 然 后 对 其 进行 扩展 并 返回 。“ 就 好 像 
所 有 的 工作 都 是 自己 做 的 一 样 ”。 

下 面 ， 我 们 用 对 象 标识 法 定义 了 一 个 普通 对 象 ， 这 时 它 还 看 不 出 有 
任何 被 寄生 的 可 能 性 : 


var twoD = { 





name: '2D shape’, 
dimensions: 2 
}; 
然后 我 们 来 编写 用 于 创建 triangle 对 象 的 函数 。 
将 twoD 对 象 克隆 进 一 个 叫做 that 的 对 象 ， 这 一 步 可 以 使 用 我 们 之 
前 所 讨论 过 的 任何 方法 ， 例 如 使 用 objectO 函 数 或 者 执行 全 属性 拷贝 。 
扩展 that 对 象 ， 添 加 更 多 的 属性 。 
返回 that 对 象 。 
function triangle(s, h) { 
var that = object(twoD); 
that.name ='Triangle'; 
that.getArea = function(){ 
return this.side * this.height / 2; 
上 
that.side = s; 


that.height = h; 
return that; 
} 
由 于 triangle.) Ree}, Na Ties, PROV CaS Ze 
不 需要 new 操 作 符 的 。 但 由 于 该 函数 返回 的 是 一 个 对 象 ， 所 以 即便 我 们 
在 函数 调用 时 错误 地 使 用 7 了 new 操作 符 ， 它 也 会 按照 预定 的 方式 工作 。 
> var t = triangle(5, 10); 





> t.dimensions 

2 

> var t2 = new triangle(5,5); 

> t2.getArea(); 

12.5 

注意 ， 这 里 的 that 只 是 一 个 名 字 ， 并 不 存在 与 保留 字 this 用 法 类 似 的 
特殊 含义 。 
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我 们 再 来 看 一 种 继承 实现 〈 这 是 本 章 最 后 一 个 了 ， 我 保证 ) 。 这 需 
要 再 次 从 构造 器 函数 入 手 ， 这 回 不 直接 使 用 对 象 了 。 由 于 在 这 种 继承 模 
式 中 ， 子 对 象 构造 器 可 以 通过 call0 或 apply0 方 法 来 调用 父 对 象 的 构造 
器 ， 因 而 ， 它 通常 被 称 为 构造 器 盗用 法 (stealing a constructor) ， 或 者 
构造 器 借用 法 (borrowing a constructor) ， 如 果 您 想 更 含蓄 一 点 的 话 。 

尽管 cal0 和 apply0 这 两 个 方法 在 第 4 章 : 对 象 中 均 已 经 讨论 过 ， 但 
这 里 我 们 要 更 进一步 。 正 如 您 所 知 ， 这 两 个 方法 都 允许 我 们 将 某 个 指定 
对 象 的 this 值 与 一 个 函数 的 调用 绑 定 起 来 。 这 对 于 继承 而 言 ， 就 意味 痢 
子 对 象 的 构造 器 在 调用 父 对 象 构 造 器 时 ， 也 可 以 将 子 对 象 中 新 建 的 this 
对 象 与 父 对 象 的 this 值 绑 定 起 来 。 

下 面 ， 我 们 来 构建 一 个 父 类 构造 器 Shape0): 

function Shape(id) { 

this.id = id; 
} 
Shape.prototype.name = 'shape’; 

















Shape.prototype.toString = function(){ 
return this.name; 
ie 
现在 我 们 来 定义 Triangle0 构 造 器 ， 在 其 中 通过 apply(0 方 法 来 调用 
Shape0 构 造 器 ， 并 将 相关 的 this 值 〈 即 new TriangleO0 所 创建 的 示例 ) 和 
其 他 一 些 参数 传递 该 方法 。 
function Triangle() { 


Shape.apply(this, arguments); 


} 
Triangle.prototype.name = Triangle’; 
注意 ， 这 里 无 论 是 Triangle() 还 是 Shape() 都 在 其 各 自 的 原型 中 添加 





些 额 外 的 属性 。 


下 和 面 ， 我 们 来 测试 一 下 ， 先 新 建 一 个 triangle 对 象 : 
> var t = new Triangle(101); 

> t.name; 

"Triangle" 


在 这 里 ， 新 的 triangle 对 象 继承 了 其 父 对 象 的 id 属性 ， 但 它 并 没有 继 


承 父 对 象 原型 中 的 其 他 任何 东西 : 


> t.id; 

101; 

> t.toString(); 

"Lobject Object]" 

之 所 以 triangle 对 象 中 不 包含 Shape 的 原型 属性 ， 是 因为 我 们 从 来 没 


有 调用 new Shape() 创 建 任何 一 个 实例 ， 上 自然 其 原型 也 从 来 没有 被 用 到 。 
这 很 容易 做 到 ， 例 如 在 本 章 最 初 的 那个 示例 中 ， 我 们 可 以 对 TriangleO 构 
造 器 进行 如 下 重 定 义 : 


function Triangle() { 
Shape.apply(this, arguments); 

} 

Triangle.prototype = new Shape(); 

Triangle.prototype.name = Triangle’; 


在 这 种 继承 模式 中 ， 父 对 象 的 属性 是 以 子 对 象 自 号 属性 的 号 份 来 重 


建 的 。 这 也 体现 了 构造 器 借用 法 的 一 大 优势 : 当 我 们 创建 一 个 继承 于 数 
组 或 者 其 他 对 象 类 型 的 子 对 象 时 ， 将 获得 一 个 完 完 全 全 的 新 值 〈 不 是 一 
个 引用 ) ， 对 它 做 任何 修改 都 不 会 影响 其 父 对 象 。 
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被 调用 两 次 ;一 次 发 生 在 通过 apply0 方 法 继承 其 自身 属性 时 ， 而 另 一 次 
则 发 生 在 通过 new 操作 符 继 承 其 原型 时 。 这 样 一 来 ， 父 对 象 的 自 喘 属性 
事实 上 被 继承 了 两 次 。 下 面 让 我 们 来 做 一 个 简单 的 演示 : 
function Shape(id) { 
this.id = id; 

} 

function Triangle() { 
Shape.apply(this, arguments); 

} 

Triangle.prototype = new Shape(101); 

然后 我 们 新 建 一 个 实例 : 

> var t = new Triangle(202); 

> t.id; 

202 

如 您 所 见 ， 对 象 中 有 一 个 自 映 属性 id， 但 它 并 非 来 自 原型 链 中 ， 我 
们 可 以 执行 如 下 验证 : 

> t.__proto__.id; 

101 

> delete t.id; 





true 

> t.id; 

101 

音 用 构造 器 与 原型 复制 

对 于 这 种 由 于 构造 器 的 双重 调用 而 带 来 的 重复 执行 问题 ， 实 际 上 是 
很 容易 更 正 的 。 我 们 可 以 在 父 对 象 构 造 器 上 调用 apply0 方 法 ， 以 获得 其 
全 部 的 上 自 吴 属性 ， 然 后 再 用 一 个 简单 的 欠 代 堪 对 其 原型 属性 执行 逐 项 找 





贝 〈 这 也 可 以 使 用 之 前 讨论 的 extend2(0) 方 法 来 完成 ) 。 例 如 
function Shape(id) { 
this.id = id; 
} 
Shape.prototype.name = 'Shape’; 
Shape.prototype.toString = function(){ 
return this.name; 
ie 
function Triangle() { 
Shape.apply(this, arguments); 
} 
extend2(Triangle, Shape); 
Triangle.prototype.name = Triangle’; 
下 面 测试 一 下 : 
> var t = new Triangle(101); 
> t.toString(); 
"Triangle" 
> t.id; 
101 
这 样 一 来 ， 双 重 继承 就 不 见 了 : 
> typeof t.__ proto__.id; 
"undefined" 
如 果 必 要 的 话 ，extend2() 还 可 以 访问 对 象 的 uber 属 性 : 
> t.uber.name; 
"Shape" 


6.14 本 章 小 结 


在 本 章 ， 我 们 学 习 了 一 系列 用 于 实现 继承 的 方法 〈 模 式 ) 。 表 6-1 
罗列 了 这 些 方法 。 它 们 大 臻 上 可 以 分 为 两 类 。 

基于 构造 器 工作 的 模式 。 

基于 对 象 工作 的 模式 。 





此 外 ， 我 们 也 可 以 基于 以 下 条 件 对 这 些 模式 进行 分 类 。 
是 人 否 使 用 原型 。 
是 否 执行 属性 拷贝 。 
两 者 都 有 《 即 执行 原型 属性 找 贝 ) 。 
表 6-1 


代码 示例 所 属 模式 技术 注解 







编号 | 名 称 





。 基于 构造 器 |。 默认 继承 机 制 

工作 的 模式 。 提示 : 我 们 可 以 将 方法 与 
。 使 用 原型 链 | 属性 集中 可 重用 的 部 分 迁移 
模式 到 原型 链 中 ， 而 将 不 可 重用 
的 那 部 分 设置 为 对 象 的 自身 
属性 


原型 链 
1 法 Cj |Child.prototype = new Parent(); 
传统 ) 








续 表 


。 基于 构造 器 |。 由 于 该 模式 在 构建 继承 关 
工作 的 模式 系 时 不 需要 新 建 对 象 实例 ， 
。 原型 拷贝 模 | 效 率 上 会 有 较 好 的 表现 
Child.prototype = Parent. 
2 4 式 ( 不 存在 原型 |e 原型 链 上 的 查询 也 会 比较 
prototype; 
链 , 所 有 的 对 象 | 快 ， 因 为 这 里 根本 不 存在 链 
共享 一 个 原型 |。 缺点 在 于 ， 对 子 对 象 的 修 





改 会 影响 其 父 对 象 
function extend(Child, Parent) { |e 基于 构造 器 |。 此 模式 不 同 于 1 号 方法 ， 
var F = function() {}; 工作 的 模式 “| 它 只 继承 父 对 象 的 原型 属 
F.prototype = Parent. e 使 用 原型 链 | 性 ， 而 对 于 其 自身 属性 〈 也 
临时 构 prototype; 模式 就 是 被 构造 器 添加 到 this 
3 Child.prototype = new F(); 值 中 的 属性 ) 则 不 予 继承 


Child.prototype.constructor = e 另外 ， 该 模式 还 为 我 们 访 


Child; 问 父 对 象 提供 了 便利 的 方式 
Child.uber = Parent.prototype; ( 即 通过 uber 属性 ) 


function extend2 (Child, Parent) {je 基于 构造 器 |。 将 父 对 象 原型 中 的 内 容 全 
WA p = SAO 工作 模式 部 转换 成 子 对 象 原型 属性 
。 拷贝 属性 jo 无 须 为 继承 单独 创建 对 象 


var c = Child.prototype; 


for (var i in p} { 


x cli] = pli]; 实例 
。 原型 链 本 身 也 更 短 
c.uber = p; 
function extendCopy(p) { 。 非常 简单 
var c = {}; 。 没有 使 用 原型 属性 
for (var iinp) { 
c(i] = pli]; 

5 


续 表 





方法 | 方法 
代码 示例 所 属 模式 技术 注解 
号 | 名 称 


。 基于 对 象 工 | 与 方法 5 基本 相同 ， 但 所 有 


同上 , 只 需 在 遇 到 对 象 类 型 时 重复 调用 上 述 | 八代 式 ose 
函数 即 可 
function object (o) { 。 基于 对 象 工 |e。 丢 开 仿 类 机 制 ， 直 接 在 对 
| function F() {} 作 模 式 象 之 间 构 建 继承 关系 
7 p . F.prototype = o; e 发 挥 原型 固有 优势 
return new F(); 
function objectPlus(o, stuff) { e 该 方法 实际 上 是 原型 继承 
va ey 法 (方法 7) 和 属性 拷贝 法 
function F() {} (方法 5) 的 混合 应 用 
eit 。 它 通过 一 个 函数 一 次 性 完 
A aaura 成 对 象 的 继承 与 扩展 
for (var iin stuff) { 
n[i] = stuff[i]; 
} 
return n; 
function multi() { 。 一 种 混合 插入 式 〈mixin- 
var n = {}, stuff, j = 0, style) 继承 实现 
len = arguments.length; 。 它 会 按照 父 对 象 的 出 现 
ME S ot 顺序 依次 对 它们 执行 属性 
stuff = arguments[j]; 
9 、 for (var i in stuff) { 全 拷贝 


n{i] = stuff[il]; 


return n; 


方法 | 方法 





技术 注解 
号 | 名 称 
function parasite(victim) { 。 基于 对 象 工 |。 该 方法 通过 一 个 类 似 构 造 
var that = object (victim); 作 模 式 器 的 函数 来 创建 对 象 
10 pene that.more = 1; 。 使 用 原型 链 |。 该 函数 会 执行 相应 的 对 象 
承 法 
i return that; 模式 找 贝 ， 并 对 其 进行 扩展 ， 然 
后 返回 该 拷贝 
基于 构造 器 工 |e 该 方法 可 以 只 继承 父 对 象 
作 模 式 的 自身 属性 
, l e 可 以 与 方法 1 结合 使 用 ， 
funetion Child() { 
构造 器 以 便 从 原型 中 继承 相关 内 容 
11 Parent.apply(this, arguments) ; 
借用 法 © 它 便 于 我 们 的 子 对 象 继承 


某 个 对 象 的 具体 属性 (并 且 
还 有 可 能 是 引用 类 属性 ) 时 ， 
选择 最 简单 的 处 理 方式 

。 使 用 构造 器 |。 该 方法 是 方法 11 与 方法 4 









构造 器 |function Child() { 


. 工作 模式 的 结合 体 
借用 与 Parent.apply (this, arguments); 
12 。 使 用 原型 链 |。 它 允 许 我 们 在 不 重复 调用 


属性 找 |} 


‘ 模式 父 对 象 构 造 器 的 情况 下 同时 
贝 法 Jextend2 (Child, Parent); 


。 属性 拷贝 模式 | 继承 其 自身 属性 和 原型 属性 

面 对 这 么 多 方法 ， 我 们 应 该 如 何 做 出 正确 的 选择 呢 ? 事实 上 这 取决 
于 我 们 的 设计 风格 、 性 能 需求 、 具 体 项 目 任务 及 团队 。 例 如 ， 您 是 否 更 
习惯 于 从 类 的 角度 来 解决 问题 ? 那么 基于 构造 器 工作 模式 更 适合 您 。 或 
者 您 可 能 只 关心 该 “类 ?的 菏 些 具体 实例 ， 那 么 可 能 使 用 基于 对 象 的 模式 
ait. 

那么 ， 继 承 实现 是 否 只 有 这 些 呢 ? 当然 不 是 ， 我 们 可 以 从 上 面 的 表 
中 选择 任何 一 种 模式 ， 也 可 以 混合 使 用 它们 ， 甚 至 我 们 也 可 以 写 出 我 们 
目 己 的 方法 。 重 点 在 于 必须 理解 并 熟悉 这 些 对 象 、 原 型 以 及 构造 占 的 工 
作 方 式 ， 剩 下 的 就 简单 了 。 














6.15 案例 T SJ: 图 ee rill 


下 和 面 ， 让 我 们 用 一 个 更 为 具体 的 继承 应 用 示例 来 作为 本 章 的 结尾 
吧 。 示 例 的 任务 是 计算 各 种 不 同 图 形 的 面积 和 边界 ， 然 后 将 它们 绘制 出 
来 。 并 且 ， 要 求 在 这 过 程 中 尽 可 能 地 实现 代码 重用 。 


6.15.1 分 


首先 ， 我 们 要 将 所 有 对 象 的 公共 部 分 定义 成 一 个 构造 器 ， 即 
Shape。 人 然后 我 们 基于 这 个 构造 右 分 别 构建 我 们 的 Triangle、Rectangle 和 
Square 构造 器 ， 它 们 将 全 部 继承 于 Shape。 其 中 ，Square 实际 上 可 以 被 
当做 一 个 长 宽度 相等 的 Rectangle， 因 此 当 我 们 构建 Square 时 可 以 直接 重 
用 Rectangle。 

下 面 ， 我 们 来 定义 Shape 对 象 ， 首 先 ， 我 们 要 定义 一 个 带 X、y 坐 标 
的 point 对 象 。 图 形 一 般 都 是 由 知 干 个 point 组 成 的 。 例 如 ， 定 义 一 个 
Triangle 对 象 需要 三 个 point 对 象 ， 而 定义 一 个 Rectangle 对 象 〈 为 了 让 题 
目 尽 可 能 简单 ) 需要 定义 一 个 point 对 象 和 其 长 宽度 。 图 形 的 周 长 一 般 是 
其 各 边 长 度 的 综合 ， 而 计算 一 个 图 形 的 面积 的 公式 则 随 图 形 不 同 有 较 大 
差异 ， 应 该 由 这 些 图 形 自 己 来 实现 。 

这 样 一 来 ，Shape 体 系 中 的 共有 属性 主要 包括 : 

一 个 能 根据 给 定 的 point 绘制 出 图 形 的 draw0) 方 法 。 

一 个 getParameter() 方 法 。 

一 个 用 于 存储 point 对 象 的 数组 属性 。 

其 他 必须 的 属性 与 方法 。 

关于 绘制 部 分 ， 我 们 还 将 用 到 <canvas> 标 签 。 尺 管 早期 的 下 并 不 支 




















持 这 一 特性 ， 但 管 它 呢 ， 这 不 过 是 个 练习 。 

当然 ， 还 有 两 个 辅助 构造 器 不 能 不 提 一 一 Point 和 Line。 其 中 ，Point 
用 于 定义 图 形 ， 而 Line 则 用 于 计算 给 定 两 个 点 之 间 的 距离 。 

读者 也 可 以 到 http://www.phpied.com/files/canvas/ 中 去 运行 该 工作 示 
例 ， 只 需 打 开 控 制 台 ， 然 后 按部就班 新 建 图 形 即 可 。 














6.15.2 实现 


首先 ， 我 们 要 在 空白 的 HTML 页 面 中 添加 一 个 canvas 标 签 : 
<canvas height="600" width="800" id="canvas" /> 
然后 再 插入 <script> 标 签 ， 我 们 的 JavaScript 代 人 码 就 要 放 在 这 里 : 
<script> 
// ... code goes here 
</script> 
FH, RAIRE JavaScript or TAE. Gee CH aie at 
Point， 最 简单 的 实现 方法 如 下 : 
function Point(x, y) { 
this.x = x; 
this.y = y; 
要 注意 的 是 ， 访 画布 〈 即 canvas) 的 坐标 系 是 从 x=0、y=0 这 点 开始 
的 ， 即 图 6-3 中 的 左上 角 ， 而 右 下 角 的 坐标 则 是 x=800、y=600。 





图 6-3 
接 下 来 ， 轮 到 构造 器 Line 了 ， 它 将 会 根据 勾 股 定理 22 + b? = c 公式 





计算 出 给 定 两 点 之 间 的 直线 距离 (假设 这 两 点 位 于 一 个 右 直 角 三 角形 的 
RRAPI) o 
function Line(p1, p2) { 
this.p1 = p1; 
this.p2 = p2; 
this.length = Math.sqrt( 
Math.pow(p1.x - p2.x, 2) + 
Math.pow(p1.y — p2.y, 2) 
); 

} 

下 一 步 ， 我 们 就 可 以 进入 Shape 构 造 右 的 定义 了 。 该 构造 器 需 要 有 
一 个 自己 的 points 属 性 (以 及 链接 这 些 point 的 Lines 属 性 ) 。 男 外 我 们 还 
需要 一 个 初始 化 方法 init()， 用 于 定义 其 原型 。 

function Shape() { 


this.points = []; 
this.lines = []; 
this.init(); 
} 
接 下 来 进入 正题 : 定义 Shape.Prototype 的 方法 。 下 面 我 们 用 对 象 标 
识 法 来 定义 所 有 的 方法 。 其 中 ， 我 们 对 每 个 方法 做 了 相关 的 注释 说 明 。 
Shape.prototype = { 
// reset pointer to constructor 
constructor: Shape, 
// initialization, sets this.context to point 
// to the context if the canvas object 
init: function () { 
if (this.context === undefined) { 
var canvas = document.getElementBylId(‘canvas'); 
Shape.prototype.context = canvas.getContext('2d’); 
} 
}, 
// method that draws a shape by looping through this.points 
draw: function () { 
var i, ctx = this.context; 
ctx.strokeStyle = this.getColor(); 
ctx.beginPath(); 
ctx.moveTo(this.points[0].x, this.points[0].y); 
for (i = 1; i<this.points.length; i++) { 
ctx.lineTo(this.points[i].x, this.points[i].y); 
} 
ctx.closePath(); 


ctx.stroke(); 
bs 
// method that generates a random color 
getColor: function () { 
var i, rgb = []; 
for (i = 0; i< 3; i++) { 
rgb[i] = Math.round(255 * Math.random()); 
} 
return 'rgb(' + rgb.join(’,') + ')' 
bs 
// method that loops through the points array, 
// creates Line instances and adds them to this.lines 
getLines: function () { 
if (this.lines.length> 0) { 
return this.lines; 
} 
vari, lines = []; 
for (i = 0; i<this.points.length; i++) { 
lines[i] = new Line(this.points[i], 
this.points[i + 1] || this.points[0]); 
} 
this.lines = lines; 
return lines; 
bs 
// shell method, to be implemented by children 
getArea: function () {}, 


// sums the lengths of all lines 


getPerimeter: function () { 
var i, perim = 0, lines = this.getLines(); 
for (i = 0; i<lines.length; i++) { 
perim += lines[i].length; 
} 
return perim; 
} 
} 
接着 是 子 对 象 构造 器 ， 先 从 Triangle 开 始 : 


function Triangle(a, b, c){ 





this.points = [a, b, c]; 
this.getArea = function(){ 
var p = this.getPerimeter(); 
S=p/2; 
return Math.sart( 
S 
* (s - this.lines[0].length) 
* (s - this.lines[1].length) 
* (s - this.lines[2].length)); 


15 
} 
在 Triangle 构 造句 中 ， 我 们 会 将 其 接收 到 的 三 个 point 对 象 赋值 给 
this.points (此 为 该 对 象 自身 的 点 的 集合 ) 。 然 后 再 利用 海伦 公式 





(Heron's formula) H 实现 其 getArea0 方 法 ， 公 式 如 下 : 
Area = s(s-a)(s-b)(s-c) 
其 中 ，s 为 半 周 长 〈《 即 周 长 除 以 2) 。 


接 下 来 轮 到 Rectangle 构 造 器 了 ， 该 对 象 所 接收 的 参数 是 一 个 point 对 
象 〈 即 左上 角 位 置 》 和 两 边 的 长 度 。 然 后 再 以 该 point 起 点 ， 自 行 填充 其 
points 数 组 。 
function Rectangle(p, side_a, side_b){ 
this.points = [ 
P， 
new Point(p.x + side_a, p.y), // top right 
new Point(p.x + side_a, p.y + side_b), // bottom right 
new Point(p.x, p.y + side_b) // bottom left 
Í; 
this.getArea = function() { 


return side_a * side_b; 


} 

最 后 一 个 子 对 象 构 造 器 是 Square。 由 于 Square 是 Rectangle 的 一 种 特 
例 ， 所 以 对 于 它 的 实现 ， 我 们 可 以 重用 Rectangle， 而 其 中 最 简单 的 莫 过 
于 构造 器 借用 法 了 。 

function Square(p, side){ 

Rectangle.call(this, p, side, side); 

} 

到 目前 为 止 ， 所 有 构造 器 的 实现 都 已 经 完成 。 让 我 们 开始 处 理 它们 
之 间 的 继承 关系 ， 几 乎 所 有 的 仿 传统 模式 〈 即 工作 方式 是 基于 构造 器 而 
非 对 象 的 模式 ) 都 符合 我 们 的 需求 。 下 面 ， 让 我 们 来 试 着 将 其 修改 为 原 
型 链 模式 ， 并 提供 一 个 简化 版 本 《第 一 种 方法 本 章 之 前 已 经 讨论 过 
T) 。 在 该 模式 中 ， 我 们 需要 新 建 一 个 父 对 象 实体 ， 然 后 直接 将 其 设置 
为 子 对 象 的 原型 。 这 样 一 来 ， 我 们 就 没有 必要 为 每 个 子 对 象 的 原型 创建 
新 的 实体 了 一 一 因为 它们 可 以 通过 原型 实现 完全 共享 。 

















(function () { 
var s = new Shape(); 
Triangle.prototype = s; 
Rectangle.prototype = s; 
Square.prototype = s; 


DDO; 
6.15.3 测试 


下 面 我 们 来 绘制 一 些 图 形 ， 测 试 一 下 代码 。 首 先 来 定义 Triangle 对 
象 的 三 个 point: 

> var pl = new Point(100, 100); 

> var p2 = new Point(300, 100); 

> var p3 = new Point(200, 0); 

然后 将 这 三 个 point 传 递 给 Triangle 构 造 器 ， 以 创建 一 个 Triangle 实 
例 : 

> var t = new Triangle(p1, p2, p3); 

接着 ， 我 们 就 可 以 调用 相关 的 方法 在 画布 上 绘制 出 三 角形 ， 并 计算 
出 它 的 面积 与 周 长 : 


> t.draw(); 





> t.getPerimeter(); 

482.842712474619 

> t.getArea(); 

10000.000000000002 

接 下 来 是 Rectangle 的 实例 化 : 

> var r = new Rectangle(new Point(200, 200), 50, 100); 


> r.draw(); 


> r.getArea(); 

5000 

> r.getPerimeter(); 

300 

最 后 是 Square: 

> var s = new Square(new Point(130, 130), 50); 

> s.draw(); 

> s.getArea(); 

2500 

> s.getPerimeter(); 

200 

如 果 想 给 这 些 图 形 绘制 增加 一 些 乐趣 ， 我 们 也 可 以 像 下 面 这 样 ， 在 
绘制 Square 时 偷 个 懒 ， 重 用 triangle 的 point。 

> new Square(p1, 200).draw(); 

最 终 测试 结果 如 图 6-4 所 示 : 








1. 使 用 原型 继承 模式 〈 而 不 是 属性 捞 贝 的 方式 ) 实现 多 重 继承 。 
例如 : 
var my = objectMulti(obj, another_obj, a_third, { 


additional: "properties" 





}); 
属性 additional 应 该 是 私有 属性 ， 而 其 他 属性 则 应 该 归并 入 
prototype. 





2. ALA EMA tp EIT KER, SA PASTA AR PG, ll 

2 rill Hi —#6Triangle, Square. Rectangle 图 形 。 

添加 更 多 的 图 形 构造 器 ， 例 如 Trapezoid. Rhombus, Kite ”以 及 
Pentagon 等 。 如 果 您 还 想 对 canvas 标 签 有 更 多 的 了 解 ， 也 可 以 创建 一 个 
Circle 构 造 器 ， 该 构造 器 需要 您 重 写 父 对 象 的 draw() 方 法 。 

考虑 一 下 ， 是 否 还 有 其 他 方式 可 以 实现 并 使 用 这 些 类 型 继承 关系 ， 
从 而 解决 上 述 问 题 ? 

请 选择 一 个 子 对 象 能 通过 uber 属 性 访问 的 方法 ， 并 为 其 添加 新 的 功 





能 ， 使 得 父 对 象 可 以 奶 踊 到 该 方法 所 属 的 子 对 象 。 例 如 ， 或 许 我 们 可 以 
在 父 对 象 中 建立 一 个 用 于 存储 其 所 有 子 对 象 的 数组 属性 。 









































第 7 音 浏览 器 环境 


之 前 我 们 已 经 说 过 ， 运 行 JavaScript 程 序 需要 一 个 宿主 环境 。 到 目前 
为 止 ， 本 书 所 讨论 的 大 部 分 内 容 都 是 围绕 着 ECMAScript/JavaScript 核 心 
标准 ， a ee 下 面 ， 就 让 我 们 将 焦点 转移 

到 浏览 器 这 个 当下 最 流行 、 也 是 最 常见 的 JavaScript 住 主 环境 上 来 吧 。 在 
这 一 草 中 ， 我 们 将 学 习 以 下 内 容 : 

BOM (Browser Object Model， 即 浏览 器 对 象 模 型 ) 。 

DOM (Document Object Model， 即 文档 对 象 模型 ) 。 

浏览 器 事件 。 

XMLHttpRequest 对 象 。 





7.1 在 HTMIL 页 JavaScript 代 仙 


要 想 在 HTML 页 面 中 引入 JavaScript 代 码 ， 我 们 需要 用 到 <script> 标 
签 : 
<!DOCTYPE> 
<html> 
<head> 
<title>JS test</title> 
<script src="somefile.js"></script> 
</head> 
<body> 
<script> 
vara=1; 
a++; 
</script> 
</body> 
</html> 
在 上 面 的 示例 中 ， 第 一 个 <script> 标 志 引 入 的 是 一 个 外 部 文件 
somefile.js， 其 中 包含 了 相关 的 JavaScript 代 码 。 而 第 二 个 <script> 标 签 则 
是 直接 在 HTML 页 面 中 直接 插入 了 JavaScript 代 码 。 浏 览 器 会 在 页 面 中 按 
顺序 执行 所 有 的 JavaScript 代 码 ， 且 所 有 标签 中 的 代码 都 共享 同一 个 名 字 
空间 (namespace) 。 也 就 是 说 ， 这 可 以 使 我 们 在 somefile.js 中 所 定义 的 
变量 ， 在 第 二 个 <script> 区 块 中 依然 可 用 。 





7.2 概述 : BOM5DOM 


通常 情况 下 ， 页 面 中 的 JavaScript 代码 都 有 一 系列 可 以 访问 的 对 
象 ， 它 们 可 以 分 成 以 下 几 种 。 

ECMAScript 核心 对 象 : 我 们 在 之 前 几 章 中 讨论 过 的 所 有 对 象 都 属 
IEE 

DOM: 当前 载 入 页 面 所 拥有 的 对 象 〈“ 页 面 有 时 也 可 以 叫做 文 
档 ) 。 

BOM: 页 面 以 外 事物 所 拥有 的 对 象 〈 即 浏览 器 窗口 和 时 面 屏 
He) 0 

Hr, DOM 意 为 文档 对 象 模型 (Document Object Model) ， 而 
BOM Ad ii as} REAL (Browser Object Model) 。 

DOM 是 一 个 标准 ， 由 世界 万 维 网 联合 协会 (W3C) 负责 制定 ， 并 
拥有 多 个 不 同 的 版 本 。 这 些 版 本 我 们 称 之 为 level， 例 如 DOM level 1, 
DOM level 2 等 等 。 尽 管 ， 现 代 浏 览 器 对 这 些 标准 级 别 的 实现 程度 各 不 
相同 ， 但 大 致 上 ， 它 们 基本 上 都 完全 实现 了 DOM level 1。DOM 实 际 上 
是 对 已 有 功能 的 标准 化 。 在 DOM 制 定之 前 ， 各 浏览 器 都 有 各 自 访 问 文 
档 的 实现 。 其 中 ， 有 相当 一 部 分 是 旧时 代 遗 留 下 来 的 产品 〈 即 W3C 标 准 
产生 之 前 所 实现 的 部 分 ) ， 我 们 将 其 统称 为 DOM 0。 尽 管 ， 实 际 上 并 没 
有 一 个 叫做 DOM level 0 的 标准 存在 ， 但 其 中 相当 的 一 部 分 已 经 成 了 事 
实 上 的 标准 ， 因 为 几乎 所 有 的 主流 浏览 器 对 此 提供 了 全 面 的 支持， 也 正 
因为 如 此 ， 它 们 中 的 一 些 内 容 也 被 写 入 DOM level 1 标准 。 人 至 于 其 他 在 
DOM level 1 中 找 不 到 的 DOM 0 的 内 容 ， 都 属于 特定 浏览 器 的 特性 ， 这 
里 就 不 必 讨 论 了 。 

而 BOM 则 不 是 任何 标准 的 一 部 分 。 与 DOM 0 相似 ， 它 的 一 部 分 对 
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特性 。 由 于 HTML5 将 各 个 浏览 器 的 通用 行为 进行 了 标准 化 ， 所 以 其 中 
包含 了 通用 的 BOM 对 象 。 男 外 ， 移 动 设备 也 包含 一 些 特定 的 BOM 对 象 
CHIML5 同 样 致力 于 将 它们 标准 化 ) ， 这 些 对 象 一 般 没 有 必要 在 桌面 
计算 机 中 实现 ， 但 对 于 移动 设备 则 很 重要 ， 例 如 地 理 位 置 
(geolocation) ， 援 像 头 接 入 〈camera access) ， 震 动感 知 
(vibration) ， 和 触摸 事件 (touch events) ， 通 话 (telephony) 与 短信 收 
发 (SMS) 。 

本 章 将 只 讨论 BOM 和 DOM level 1 中 跨 浏 览 器 的 那 部 分 子 集 。 但 即 
便 是 这 些 安 全 的 子 集 也 是 一 个 很 大 的 话题 ， 也 不 是 本 书 所 能 完全 和 履 羡 
的 ， 您 可 以 参考 以 下 资源 。 

MozillaDOM 人 参考 资料 : 

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference 

Mozilla HTML5 维 基 百 科 : 

https://developer.mozilla.org/en-US/docs/HTML/HTML5 

Microsoft 在 线 文 档 : 

http://msdn2.microsoft.com/en-us/library/ms533050(vs.85).a spx 

W3C 的 DOM 技术 参考 : http://www.w3.orgDOM/DOMTR 





7.3 BOM 


BOM 〈 即 浏览 器 对 象 模型 ) 是 一 个 用 于 访问 浏览 器 和 计算 机 屏 
的 对 象 集合 。 我 们 可 以 通过 全 局 对 象 window 来 访问 这 些 对 象 。 


7.3.1 window & HIR 


正如 您 所 知 ， Payas pi 每 个 宿主 环境 都 有 一 个 全 局 对 象 。 具 
体 到 浏览 器 环境 中 ， 这 就 是 window 对 象 了 。 环 境 中 所 有 的 全 局 变量 都 
可 以 通过 该 对 象 的 属性 来 访问 ， 例 如 : 

> window.somevar = 1; 

1 

> somevar; 

1 

同样 的 ， 所 有 的 JavaScript 核心 函数 〈 即 我 们 在 第 2 章 : 基本 数据 类 
型 、 数 组 、 循 环 及 条 件 表 达 式 中 所 讨论 的 ) 也 都 是 window 对 象 的 方 
法 。 例 如 : 

> parselnt('123a456'); 

123 

> window.parseInt('123a456’); 

123 

除了 作为 全 局 对 象 的 引用 以 外 ，window 对象 还 有 另 一 个 作用 ， 
是 提供 关于 浏览 器 环境 的 信息 。 每 个 frame、iframe、 弹 出 窗 以 及 浏览 
标签 页 都 有 各 目的 window 对 象 。 

下 面 ， 我 们 来 看 一 些 window 对 象 中 与 浏览 占有 关 的 属性 。 当 然 ， 











这 些 属性 在 各 个 浏览 器 的 表现 中 可 能 各 不 相同 ， 所 以 我 们 将 尽量 局 限于 
那些 为 现代 主流 浏览 器 所 共同 实现 的 、 最 为 可 靠 的 属性 。 


7.3.2 window.navigator 


navigator 是 一 个 用 于 反映 浏览 器 及 其 功能 信息 的 对 象 。 例 如 ， 
navigator. ”userAgent 属 性 是 一 个 用 于 浏览 器 识别 的 长 字符 串 。 在 Firefox 
中 ， 我 们 将 得 到 如 下 信息 : 

> window.navigator.userAgent; 

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) 
AppleWebKit/536.28.10 (KHTML, likeGecko) Version/6.0.3 
Safari/536.28.10" 

而 在 Microsoft 的 Internet Explorer, userAgent 返回 的 字符 串 则 
是 : 

"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)" 

由 于 各 种 浏览 器 的 功能 是 各 不 相同 的 ， 开 发 人 员 有 时 需要 根据 
userAgent 字 符 串 来 识别 不 同 的 浏览 器 ， 并 提供 不 同 版 本 的 代码 。 例 如 在 
下 面 的 代码 中 ， 我 们 就 是 通过 搜索 “MSIE” 子 串 来 识别 Internet Explorer: 

if (navigator.userAgent.indexOf(MSIE') !== -1) { 

// this is IE 
} else { 
// not IE 

} 

当然 了 ， 最 好 还 是 不 要 过 份 依赖 于 这 种 用 户 代 理 检 测 法 ， 特 性 监听 
法 也 叫做 功能 检测 法 ) 无 疑 是 更 好 的 选择 。 因 为 通过 这 种 字符 串 很 难 
追踪 到 所 有 的 浏览 器 以 及 其 各 种 版 本 。 所 以 ， 直 接 检查 我 们 使 用 的 功能 
在 用 户 浏览 器 中 是 否 存 在 要 简单 得 多 ， 例 如 : 














if (typeof window.addEventListener === 'function') { 
// feature is supported, let's use it 
} else { 
//hmm, this feature is not supported, will have to 
// think of another way 
} 
另外 ， 还 有 一 个 原因 也 促使 我 们 避免 使 用 这 种 用 户 代 理 检测 法 ， 因 
为 在 某 些 浏览 器 中 ， 用 户 是 可 以 对 该 字符 串 进行 修改 ， 并 将 其 伪装 成 其 
他 浏览 器 的 。 





7.3.3 控制 台 的 备 态 功能 


控制 台 提 供 了 一 种 便利 的 对 象 检索 功能 ， 其 功能 涵盖 了 BOM 和 
DOM 中 所 有 的 对 象 。 因 此 通常 情况 下 ， 我 们 只 要 在 控制 台中 输入 : 
> navigator; 


然后 单 击 其 结 末 ， 就 可 以 将 其 所 包含 的 属性 展开 ， 见 图 7-1。 
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> Navigator; 
© ¥ Navigator 


appCodeName: "Mozilla" 
appName: "Netscape" 
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Geç 
cookieEnabled: true 
> geolocation: Geolocation 
language: "en-US" 
> mimeTypes: MimeTypeArray 
onLine: true 
platform: "MacIntel" 
> plugins: PluginArray 
product: "Gecko" 
productSub: "20030107" 
userAgent: “Mozilla/5.® (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, 
vendor: "Google Inc." 
vendorSub: "" 
>» _proto__: Navigator 


= Q © <topframe> Ww <page context> v (All } | Errors Warnings Logs 


图 7-1 





7.3.4 window.location 


location 属性 是 一 个 用 于 存储 当前 载 入 页 面 URL 信息 的 对 象 。 例 如 
其 中 的 location.href 显 示 的 是 完整 的 URL， 而 location.hostname 则 只 显示 
相关 的 域名 信息 。 下 面 ， 我 们 通过 一 个 简单 的 循环 列 出 location 对 象 的 
完整 属性 列表 。 
假设 我 们 的 页 面 ，URL 为 
http://search.phpied.com:8080/search?p=java&what=script#results, 4S 





Az: 
for(var i in location) { 
if(typeof location[i] === “string”) { 


console.log(i 十 "二 "十 location[i] + n 


} 
href = "http://search.phpied.com:8080/search? 


q=java&what=script#results" 


hash = "#results" 

host = "search.phpied.com:8080" 

hostname = "search.phpied.com" 

pathname = "/search" 

port = "8080" 

protocol = "http:" 

search = "?q=java&what=script" 

另外 ，location 对 象 还 提供 了 三 个 方法 ， 分 别 是 reload(). assign()#ll 


replace()。 


日 
只 是 


历史 


将 当前 页 面 导 航 到 新 的 页 面 存在 着 许多 种 不 同 的 方式 ， 下 面 列 出 的 
其 中 一 小 部 分 : 

> window.location.href = 'http://www.packtpub.com’; 

> location.href = 'http://www.packtpub.com'; 

> location = 'http://www.packtpub.com’; 

> location.assign(‘http://www.packtpub.com'); 

replace() 方 法 的 作用 与 assign0 基 本 相同 ， 只 不 过 它 不 会 在 浏览 器 的 
记录 表 中 留 下 记录 : 

> location.replace('http:/www.yahoo.com'); 

男 外 ， 如 果 我 们 想 重 新 载 入 某 个 页 面 ， 可 以 调用 : 

> location.reload(); 

或 者 ， 也 可 以 让 location.href 属 性 再 次 指向 自己 ， 比 如 : 

> window.location.href = window.location.href ; 

还 可 以 再 简化 一 下 : 


> location = location; 





7.3.9 window.history 


window.history 属 性 允许 我 们 以 有 限 的 权限 操作 同一 个 浏览 器 会 话 
(session) 中 的 已 访问 页 面 。 例 如 ， 我 们 可 以 通过 以 下 方式 来 查看 用 户 

在 这 之 前 访问 了 多 少 页 面 : 

> window.history.length; 

5 

基于 隐私 保护 ， 我 们 无 法 获得 这 些 页 面具 体 的 URL， 例 如 像 下 面 这 
样 是 不 被 允许 的 : 

> window.history[0]; 

但 是 我 们 可 以 在 当前 用 户 会 话 中 对 各 页 面 进行 来 回 切换 ， 就 像 您 在 
浏览 器 中 单 击 后 退 /前 进 按钮 一 样 : 

> history.forward(); 

> history.back(); 

另外 ， 我 们 也 可 以 用 history.go0 来 实现 页 面 跳 转 ， 例 如 ， 下 面 的 调 
用 效果 和 history.backO 相 同 : 

> history.go(-1); 

接 下 来 是 后 退 两 页 的 情况 : 

> history.go(-2); 

如 果 想 重 载 当前 页 ， 可 以 这 样 : 

> history.go(0); 

另外 ， 如 今 更 新 版 的 浏览 器 也 对 HTML5 的 History API 提 供 了 支持 ， 
这 些 API 人 允许 我 们 在 不 对 整体 页 面 进行 重 载 的 情况 下 更 改 其 中 的 URL。 
这 为 我 们 提供 了 一 种 近乎 完美 的 动态 页 面 ， 因 为 它 允 许 用 户 对 特定 的 页 
面 进行 书签 记录 ， 以 代表 应 用 程序 的 某 一 状态 ， 这 样 一 来 ， 当 他 们 之 后 
返回 到 《或 与 朋友 们 分 享 ) 该 页 面 时 就 能 通过 该 URL 恢 复 该 应 用 程序 的 

















这 个 状态 。 下 面 ， 我 们 就 来 体验 一 下 这 些 History API， 请 在 任意 页 面 下 
打开 控制 台 ， 并 输入 以 下 代码 : 

> history.pushState({a: 1}, "", "hello"); 

> history.pushState({b: 2}, "", "hello-you-too"); 

> history.state; 

请 注意 ， 上 面 的 UREL 虽 然 梓 更改 了 ， 但 页 面 本 身 并 没有 变化 。 接 下 
来 ， 您 可 以 在 浏览 右 中 和 党 试 着 按 一 下 "后退 ” 和 和" 前进? 按钮 ， 并 再 次 碍 看 
一 下 history.state。 








7.3.6 window.frames 


window.frames 属性 是 当前 页 面 中 所 有 框架 的 集合 。 要 注意 的 是 ， 
这 里 并 没有 对 frame 和 iframe 《内 联 框架 ) 做 出 区 分 。 而 且 ， 无 论 当 前 











页 面 中 是 否 存 在 框 染 ， window.frames 属 性 总 是 存在 的 ， 并 总 是 指向 
window! RAL. 

> window.frames === window; 

true 


假设 我 们 的 页 面 中 有 一 个 iframe 元 素 : 
<iframe name="myframe" src="hello.html" /> 


我 们 可 以 通过 检查 其 length 属 性 来 了 解 当 前 页 面 中 是 人 否 存 在 frame 元 





素 : 

> frames.length; 

1 

frames 中 的 每 个 元 素 都 包含 了 一 个 页 面 ， 都 有 各 目的 window 全 局 对 
象 。 


如 果 想 访问 iframe 元 素 的 window 对 象 ， 可 以 选择 下 面 方式 中 的 任何 
一 种 : 


> window.frames[0]; 

> window.frames[0].window; 

> window frames[0].window.frames; 

> frames[0].window; 

> frames[0]; 

通过 父 级 页 面 ， 我 们 可 以 访问 子 frame 元 素 的 属性 。 例 如 ， 您 可 以 
用 以 下 方式 来 实现 frame 元 素 的 重 载 : 

> frames[0].window.location.reload(); 

同样 的 ， 我 们 也 可 以 通过 子 元 素来 访问 父 级 页 面 : 

> frames[0].parent === window; 

true 

另外 ， 通 过 一 个 叫做 top 的 属性 ， 我 们 可 以 访问 到 当前 最 顶层 页 面 

《 即 包含 所 有 其 他 frame 元 素 的 页 面 ) 中 的 任何 frame 元 素 : 


> window.frames[0].window.top === window; 

true 

> window.frames[0].window.top === window.top; 

true 

> window.frames[0].window.top === top; 

true 

除 此 之 外 还 有 一 个 self 属 性 ， 它 的 作用 与 window 基 本 相同 。 
> Self === window; 

true 


> frames[0].self == frames[0].window; 

true 

mi Aframevt RI A namei tt, KATA WAIPR SI, 过 name 
属性 的 值 来 访问 该 frame。 


> window.frames['myframe'] === window.frames[0]; 


true 
或 者 ， 你 也 可 以 采用 以 下 代码 : 
> frames.myframe === windows.frames|[0]; 


true 
7.3.7 Window.screen 


Screen 属性 所 提供 的 是 浏览 器 以 外 的 环境 信息 。 例 如 ， 

screen.colorDepth 属 性 所 包含 的 是 当前 显示 器 的 色 位 (表示 的 是 颜色 质 
这 对 于 菏 些 统计 化 操作 来 说 ， 会 非常 有 用 。 

> window.screen.colorDepth; 

32 

另外 ， 我 们 还 可 以 查看 当前 屏幕 的 实际 状态 〈 如 分 辨 率 ) : 

> screen.width; 

1440 

> screen.availWidth; 

1440 

> screen.height; 

900 

> screen.availHeight; 

847 

其 中 ，height 和 availHeight 之 间 的 不 同 之 处 在 于 ，height 指 的 是 总 分 

站 率 ， 而 availHeight 指 的 是 除去 操作 系统 菜单 (例如 Windows 操 作 系 统 
的 任务 栏 ， 以 外 的 子 区 域 。 同 样 的 ，availWidth 的 情况 也 是 如 此 。 

再 比如 以 下 属性 : 

> window.devicePixelRatio; 

1 





它 是 设备 物理 像素 与 设备 独立 像素 Cdevice-independent pixels, 
dip) 的 比例 。 例 如 ， 在 Retina 屏 幕 的 iPhone 上 ， 这 个 值 为 2。 


7.3.8 window.open()/close() 


在 上 面 我 们 探索 了 一 些 windows 对 象 中 最 常见 的 跨 浏 览 器 属性 。 接 
下 来 ， 我 们 再 看 一 些 方法 。 其 中 ，open0 是 一 个 可 以 让 我 们 打开 新 浏览 
恬 徐 口 的 方法 ( 即 弹出 窗 〉。 如 今 ， 多 数 浏 贤 絮 的 策略 及 其 用 户 设 置 都 
会 阻止 浏览 器 的 弹出 窗 〈 以 防止 这 种 技术 的 商业 化 滥用) ， 但 在 一 般 情 
况 下 ， 如 果 该 操作 是 由 用 户 发 起 的 话 ， 我 们 就 应 该 允许 新 窗口 弹出 。 琴 
则 ， ”如 采 我 们 想 在 页 面 加 载 时 就 打开 一 个 弹出 窗 的 话 ， 多 数 情 况 下 就 
会 被 阻止 ， 因 为 该 操作 并 不 是 用 户 明 确 发 起 的 。 

window.open() 方 法 主要 接受 以 下 参数 。 

要 载 入 新 窗口 的 URL。 

新 窗口 的 名 字 ， 用 于 新 窗 体 form 标 签 的 target 属性 值 。 

以 逗号 分 割 的 功能 性 列表 ， 包 括 : 

resizable: 尺寸 的 可 调整 性 ， 即 是 否 允 许 用 户 调整 新 窗口 大 小 。 
width, height: 弹出 窗 的 长 与 宽 。 
status: 状态 ， 用 于 设置 状态 栏 的 可 见 性 。 

而 window.open() 方 法 会 返回 一 个 新 建 浏览 器 实例 的 window 对 象 引 
用 ， 例 如 : 

var win = window.open(‘http://www.packtpub.com’, 'packt', width=300, 
height=300,resizable=yes'); 

如 您 所 见 ，win 指 向 的 就 是 该 弹出 窗 的 window 对 象 。 我 们 可 以 通过 
检查 win 是 否 为 falsy 值 来 判断 弹出 窗 是 否 补 屏蔽 了 。 

win.close() 方 法 则 是 用 来 关闭 新 窗口 的 。 

总 而 言 之 ， 在 设置 天 于 打开 窗口 这 方面 功能 的 可 访问 性 和 可 用 性 














时 ， 您 最 好 要 有 充足 的 理由 。 PAPA La As a PS Ft Ha 
TEDRE, 为 什么 还 要 将 其 强加 给 用 户 呢 ?尽管 这 种 做 法 有 它 合理 的 地 
方 ， 例 如 填 表 时 为 用 户 提 供 帮 助 信息 等 ， 但 我 们 完全 可 以 用 其 他 方法 代 
蔡 ， 例 如 通过 在 页 面 中 插入 浮动 的 <div> 标 签 方法 来 解决 这 一 问题 。 


7.3.9 window.moveTo()、window.resizeTo() 


继续 刚才 所 谈 的 “ 佼 俩 ”， 实 际 上 ， 我 们 还 有 许多 方法 可 以 控制 页 
面 ， 只 只 需要 用 户 的 浏览 器 设置 允许 我 们 这 么 做 : 
调用 window.moveTo(100， 100) 将 当前 浏览 器 窗口 移动 到 屏幕 坐标 x 








=100, y=100 的 位 置 ( 指 的 是 窗口 相对 屏幕 左上 角 的 坐标 〉。 

调用 window.moveBy(10, -10) 将 窗口 的 当前 位 置 右 移 10 MAR, FF 
同时 上 移 10 个 像素 。 

调用 与 前 面 move ATT et) LL HJ window.resizeTo(x, y) Ail 
window.resizeBy (Xx，y)， 只 不 过 这 里 做 的 不 是 移动 位 置 ， 而 是 调整 窗口 
ISK 

AFL ZU FE m, SALT EAS SE see TE ET TER AER I] 








在 第 2 Hi: 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 中 ， 我 们 已 经 
接触 了 ”alert(0) 函 数 。 现 在 我 们 又 知道 了 该 函数 只 是 全 局 对 象 的 一 个 方 
法 。 也 就 是 说 ，alert(Watch out!')#llwindow.alert('Watch out!") 这 两 个 函数 
是 完全 相同 的 。 

alert() 并 不 属于 ECMAScript， 而 是 一 个 BOM 方 法 。 除 此 之 外 ， 
BOM 中 还 有 两 个 方法 可 以 让 我 们 以 系统 消息 的 形式 与 用 户 进行 交互 ， 


它们 分 别 是 : 





confirm() 方 法 ， 它 为 用 户 提 供 了 两 个 选项 一 一 OK 与 Cancel; 

prompt() 方 法 ， 它 为 用 户 提 供 了 一 定 的 文本 输入 功能 。 

下 面 来 看 看 它们 是 如 何 工作 的 : 

> var answer = confirm(‘Are you cool?’); 

> answer; 

如 您 所 见 ， 这 段 代码 会 弹出 类 似 这 样 的 窗口 (具体 的 外 观 还 要 取决 
于 浏览 器 和 操作 系统 ) ， 如 图 7-2 所 示 。 

在 这 里 ， 我 们 将 会 注意 到 两 点 : 





在 我 们 关闭 该 窗口 之 前 ， 控 制 台 将 会 停止 接受 任何 输入 ， 这 意味 着 
JavaScript 代码 在 此 处 会 暂停 执行 ， 以 等 竺 用 户 的 回复 ; 





The page at www.phpied.com says: 
& Are you cool? 


| Cancel | | ok | 


图 7-2 
如 果 单 击 的 是 “OK”， 方 法 将 会 返回 true， 而 如 果 单 击 的 
是 “Cancel” 或 者 按 x 图 标 〈 也 可 以 按 ESC 键 ) 关闭 该 窗口 则 会 返回 false。 

这 样 一 来 ， 我 们 就 可 以 根据 用 户 的 回答 来 设 定 了 ， 例 如 : 
if (confirm('Are you sure you want to delete this item?’)) { 

// delete 
} else { 

// abort 





当然 ， 我 们 还 必须 确保 在 JavaScript 被 禁用 时 或 是 搜索 引擎 访问 页 
面 时 能 提供 些 备用 方案 。 

window.prompt() 方 法 呈现 给 用 户 的 是 一 个 用 于 输入 文本 的 对 话 框 ， 
例如 : 


> var answer = prompt( And your name was?’); 


> answer; 
其 对 话 框 如 图 7-3 所 示 (在 Chrome，MacOS 环 境 中 ) : 








The page at file:/ /localhost/ says: 
& And your name was? 


Cancel | OK | 








图 7-3 

其 回复 值 可 能 会 出 现 以 下 情况 : 

如 果 我 们 直接 单 击 Cancel 或 者 x 图 标 以 及 按 ESC 键 退出 ， 对 话 框 将 会 
返回 null; 

如 果 我 们 没有 输入 任何 东西 就 直接 单 击 OK 或 按 回 车 ， 对 话 框 将 会 
BEA" CBI ARK FEAR); 

如 果 我 们 输入 了 一 些 内 容 之 后 单 击 OK 或 按 回 车 ) 。 对 话 框 就 会 
返回 相应 的 文本 字符 串 。 

另外 ， 该 函数 还 可 以 接受 第 二 个 字符 串 参 数 ， 主 要 用 做 输入 框 中 的 
默认 值 。 














7.3.11 window.setTimeout(). window.setInterval() 


setTimeoutO、setIntervalO 这 两 个 方法 主要 被 用 于 某 些 代码 片段 的 执 
行 调度 ， 其 中 ”setTimeout() 用 于 在 指定 的 毫秒 数 后 执行 某 段 既定 代码 ， 
而 setInterval() 则 用 于 每 隔 一 段 早 秒 数 重新 执行 这 段 代码 。 

下 面 来 看 一 个 在 2 秒 《〈 即 2000 坚 秒 ) 之 后 弹出 alert 窗 口 示 例 : 

> function boo(){alert('Boo!'); } 

> setTimeout(boo, 2000); 

4 

如 您 所 见 ， 该 函数 返回 了 一 个 整数 (在 这 个 例子 中 为 4) ， 该 整数 
是 该 计时 器 的 ID。 我 们 可 以 用 这 个 ID 调用 clearTimeout() 方 法 来 取消 当前 
的 计时 器 。 在 下 面 的 示例 中 ， 如 果 我 们 的 动作 够 快 ， 在 2 秒 之 前 取消 了 
th 4s, alert # O gt zk i Na T o 

> var id = setTimeout(boo, 2000); 














> clearTimeout(id); 

现在 ， 让 我 们 对 boo0) 做 些 改动 ， 换 成 一 种 不 那么 骚扰 的 方式 : 

> function boo() {console.log('boo'); }; 

接着 ， 我 们 在 setinterval() 中 调用 boo(), 2 秒 执行 一 次 ， 直 到 我 
们 调用 clearInterval0 函 数 取消 相关 的 执行 调度 为 止 。 

> var id = setInterval(boo, 2000); 


> clearInterval(id); 
要 注意 的 是 ， 上 和 面 两 个 函数 的 首 参 数 都 可 以 接受 一 个 指向 回调 函数 
的 指针 。 同 时 ， 这 两 个 函数 也 能 接受 可 以 被 eval0 函 数 执行 的 字符 串 。 


但 ” eval0 的 危险 之 处 是 众所周知 的 ， 因 此 它 应 该 尽量 被 避 人 免 使 用 。 那 
么 ， 我 们 怎么 传递 参数 给 该 函数 呢 ? 在 这 种 情况 下 ， 最 好 还 是 将 相关 的 
函数 调用 封闭 成 男 一 个 函数 。 

例如 ， 下 面 代码 在 语法 上 是 正确 的 ， 但 做 法 并 不 值得 推荐 : 

// bad idea 

var id = setInterval("alert('boo, boo')", 2000); 

显然 我 们 还 有 更 合适 的 选择 : 


var id = setInterval( 





function(){ 
alert(‘boo, boo'); 

} 

2000 

); 

请 注意 ， 虽 然 我 们 有 时 意图 让 某 个 函数 在 数量 秒 后 即 执 行 ， 但 
JavaScript 并 不 保证 该 函数 能 恰好 在 那个 时 候 被 执行 。 其 原因 之 一 在 于 
大 多 数 浏 览 器 并 没有 精确 到 坚 秒 的 触发 事件 。 例 如 ， 如 果 我 们 设 定 某 个 
函数 在 3 坚 秒 以 后 执行 ， 那 么 在 老 版 本 的 下 中， 该 轴 数 至 少 会 在 15 坚 秒 
以 后 才 执 行 。 在 现代 浏览 器 中 ， 这 个 数值 会 短 一 点 ， 但 时 间 差 一 般 不 会 
在 1 窗 秒 以 内 。 男 一 个 原因 在 于 ， 浏 览 器 会 维护 维护 一 个 执行 队列 。100 
坚 秒 的 计时 器 只 是 意味 着 在 100 喀 秒 后 将 指定 代码 放 入 执行 队列 ， 但 如 
果 队 列 中 仍 有 还 在 执行 的 代码 ， 那 么 刚刚 放 入 的 代码 就 要 等 待 直到 它们 
执行 结束 ， 从 而 虽然 我 们 设 定 了 100 毫 秒 的 代码 执行 延迟 时 间 ， 这 段 代 
码 很 可 能 到 120 坚 秒 以 后 才 会 被 执行 

最 近 很 多 浏览 器 实现 了 requestAnimatioinFrame0O 函 数 。 该 函数 更 适 
合 精确 延 时 ， 因 为 通过 该 函数 设 定 的 计时 器 ， 即 使 浏览 句 没 有 资源 ， 也 
会 在 那个 时 刻 调用 。 请 在 控制 台 下 尝试 如 下 代码 : 


function animateMe() { 




















webkitRequestAnimationFrame(function() { 
console.log(new Date()); 
animateMe(); 
}); 
} 


animateMe(); 


7.3.12 window.document 


window.document 是 一 个 BOM 对 象 ， 表 示 的 是 当前 所 载 入 的 文档 
《 即 页 面 ) 。 但 它 的 方法 和 属性 同时 也 属于 DOM 对 象 所 涵盖 的 范围 。 
现在 ， 让 我 们 深 吸 一 口气 放松 一 下 (或 者 你 可 以 去 试 试 本 章 最 后 的 
BOM 练 习 ) ， 随 后 深入 DOM 领 域 中 去 吧 ! 





7.4 DOM 


简 而 言 之 ，DOM (Document Object Model, nee 是 
一 种 将 XML 或 HTML 文 档 解析 成 树 形 市 点 的 方法 。 通 过 DOM 的 方法 与 
属性 ， 我 们 就 可 以 访问 到 页 面 中 的 任何 元 素 ， 并 进行 元 素 的 修改 、 删 除 
以 及 添加 等 操作 。 同 时 ，DOM 也 是 一 套 语言 独立 的 API (Application 
Programming Interface， 即 应 用 程序 接口 ) 体系 ， 它 不 仅 在 JavaScript 中 
有 相关 的 实现 ， 在 其 他 语言 中 也 有 实现 。 例 如 ， 我 们 可 以 在 服务 器 端 用 
PHP 的 DOM 实现 Chttp://php.net/dom) 来 产生 相关 的 页 面 。 

下 面 我 们 来 看 一 个 具体 的 HTML 页 面 : 

<!DOCTYPE html> 

<html> 

<head> 

<title>My page</title> 
</head> 
<body> 





<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 
</html> 
我 们 来 看 页 面 中 的 第 二 段 (<p><em>second</em> 
paragraph</p>) ， 首 先 看 到 的 是 <p> 标 签 ， 它 包含 在 <body> 标 丛 中 。 因 
此 ， 我 们 可 以 说 <body> 是 <p> 的 父 节 点 ， 而 <p> 是 一 个 子 节点 。 同 理 ， 





页 面 中 的 第 一 段 和 第 三 段 也 都 是 <body> 的 子 节点 ， 同 时 是 第 二 段 的 兄弟 
节点 。 而 <em> 标 签 又 是 第 二 个 <p> 标 签 的 子 节 点 ， 也 就 是 说 <p> 是 它 的 
父 厄 点 。 如 果 我 们 将 这 些 父子 关系 图 形 化 ， 束 会 看 到 一 个 树 状 族 谱 〈 见 
图 7-4) ， 我 们 将 其 称 之 为 DOM 树 。 

如 图 7-4， 在 webkit 控 制 台中 ， 单 击 Elements 选 项 卡 即 可 打开 此 界 
面 。 


first paragraph 
second paragraph 
final 


x | Ea Elements | E Resources ©) Network a Sources 


¥ <head> 
<title>My page</title> 
</head> 
¥ <body> 
<p class="opener">first paragraph</p> 
¥ <p> 
<em>second</em> 
" paragraph" 
</p> 
<p id="closer">final</p> 
<!-—— and that's about it --> 
</body> 
</html> 





图 7-4 

在 图 中 可 以 看 到 ， 页 面 中 所 有 的 标签 都 可 以 以 树 节 点 的 形式 显示 出 
来 。<em> 标 签 内 的 文字 Csecond) 也 是 一 种 节点 ， 这 种 节点 称 为 文本 节 
点 。 空 白 符 也 是 文本 节点 。 此 外 ，HTML 中 的 注释 同样 被 认为 是 一 个 树 
上 节点 ， 在 这 里 ，<!--and that's about it --> 是 一 个 注释 节点 。 

在 DOM 树 中 ， 每 个 节点 都 是 一 个 对 象 ， 右 边 的 Properties 选 项 卡 列 
出 了 该 对 象 的 所 有 属性 ， 以 及 该 对 象 能 够 使 用 的 所 有 方法 ， 它 们 以 继承 
链 的 顺序 排列 ， 如 图 7-5 所 示 。 








: | 3 z 和 ~ 
| sd Elements | \wt_| Resources ©@ Network L Sources CB Timeiine C Profiles 4 Audits L/W Console 


> Computed Style 
¥ <html> 


> Styles 
¥ <head> r 
<title>My page</title> > Metrics 
</head> ¥ Properties 
v <body> > <p> 
<p class="opener">first paragraph</p> 
¥<p> > HTMLParagraphElement 
<em=second</em> > HTMLE lement 
~ paragrapn" > Element 
< p> 
<p id="closer">final</p> » Node 
<!-- and that's about it --> > Object 
</body> - 
</html> > DOM Breakpoints 


> Event Listeners 





图 7-5 
我 们 也 能 在 选项 卡 中 找到 创建 每 个 DOM 对 象 时 所 使 用 的 构造 器 函 
数 。 当 然 ， 在 日 常 开发 中 很 少 用 到 这 个 功能 ， 然 而 这 些 冷 知识 也 很 有 
趣 : 例如 ，<p> 标 签 所 代表 的 DOM 对 象 实际 上 是 由 
HTMLParagraphElement() 构 造 器 创建 的 ， 而 <head> 则 对 应 于 
HTMLHeadElement() 等 。 不 过 ， 虽 然 我 们 能 借 此 知道 这 些 DOM 对 象 内 
部 构造 器 的 名 字 ， 但 我 们 并 不 能 直接 使 用 这 些 构 造 器 。 





7.4.1 Core DOM 与 HIML DOM 


在 接触 更 有 实际 意义 的 示例 之 前 ， 我 们 还 需要 最 后 做 一 次 概念 性 的 
梳理 。 现 在 我 们 已 经 知道 ，DOM 既 能 解析 XML 文 要 ， 也 能 解析 HTML 
文档 。 实 际 上 ，HTML 文 档 本 身 也 可 以 被 当做 一 种 特殊 的 XML ”文档 。 
因此 ， 我 们 可 以 将 DOM Level 1 中 用 于 解析 所 有 XML 文档 的 那 部 分 称 之 
为 Core DOM. 而 将 在 Core DOM 基 础 上 进行 扩展 的 那 部 分 称 之 为 HTML 
DOM. 4%&, HTML DOM 并 不 适用 于 所 有 的 XML 文档 ， 它 只 适用 于 
HTML X. FH, WERKA) F Cor DOM 和 HTML DOM 的 
构造 器 示例 ， 如 表 7-1 所 示 。 











表 7-1 
构造 器 父 级 构造 器 Core 5 HTML 注释 说 明 
Node Core DOM 树 上 所 有 的 节点 都 属于 Node 
Document Node Core ti Mas Gert feck BML K 
档 项 目 











续 表 


构造 器 父 级 构造 器 Core 或 HTML 注释 说 明 


Bl window.document 或 其 简写 
HTMLDocument Document HTML document 所 指向 的 对 象 。 是 前 一 对 象 的 
HTML 定制 版 ， 应 用 十 分 广泛 
在 源 文 档 中 ， 每 一 个 标签 都 是 一 个 元 素 ， 





Element Core À ii SS 
所 以 ，<p></p> 标 签 也 叫做 “p 元 素 
广大- Ae 牛 构 造 有 与 
HTMLElement Element HTML | 通用 性 构造 器 ， 所 有 J HTML 
元 素 有 关 的 构造 器 都 继承 于 该 对 象 
LE oe IN 7 33 =" nm 
HTMLLinkElement | HTMLElement | HTML 代表 一 个 A 元 素 〈 即 <a href=". 
></a> 标 签 ) 
CharacterData Core 文本 处 理 类 的 通用 性 构造 器 
即 插入 在 标签 中 的 文本 节点 。 例 如 在 
Text CharacterData Core <em>second</em> 这 句 代 码 中 ， 就 包含 了 
EM 元 素 节 点 和 值 为 “second” 的 文本 节点 
Comment CharacterData | Core Bll<!--HTML 注释 --> 
用 于 代表 各 标签 中 的 属性 ， 例 如 在 代码 
Attr Node Core <p id="closer"> 中 ， 属 性 id 也 是 一 


个 DOM 对 象 ， 由 Attr () 负责 创建 


即 节点 列表 ,是 一 个 用 于 存储 对 象 ， 拥 有 
自身 length 属性 的 类 数组 对 象 


其 功能 与 上 一 个 对 象 相 同 。 不 同 之 处 在 
NamedNodeMap Core 于 , 该 对 象 中 的 元 素 是 通过 对 象 名 而 不 是 
数字 索引 来 访问 的 
ee oe HTML 其 功能 也 与 前 两 个 对 象 类 似 ， 但 它 是 为 
HTML 特性 量 身 定制 的 


当然 ， 这 里 并 没有 列 出 所 有 的 Core DOM 和 HTML DOM 对 象 ， 如 
果 读 者 想 获得 完整 列表 ， 可 以 参考 链接 http:/www.w3.org/TR/DOML- 
Level-1/ 中 的 内 容 。 

现在 ， 我 们 已 经 对 DOM 理论 背后 的 实用 性 有 了 更 深入 的 理解 。 在 
接 下 来 的 章节 中 ， 我 们 将 继续 学 习 


NodeList 


Ooo o 





访问 DOM 节点 
修改 DOM 节点 
创建 新 的 DOM 节点 
移 除 DOM 节点 


7.4.2 DOM 市 点 的 访问 





在 我 们 进行 表单 验证 或 图 片 蔡 换 这 样 的 操作 之 前 ， 首 先 需 要 访问 到 

这 些 要 检查 或 修改 的 元 素 。 sou 访问 这 些 元 素 的 方法 有 很 多 ， 我 

们 既 可 以 使 用 DOM 树 的 方式 进行 融 历 ， 也 可 以 使 用 快捷 方式 进行 导 
航 。 





当然 了 ， 我 们 最 好 还 是 杀 上 自 将 这 些 新 对 象 与 方法 都 体验 一 过。 因此 
接 下 来 ， 我 们 的 示例 将 始终 围绕 DOM 一 节 开 头 所 展示 的 那个 简单 文档 
来 展开 。 需 要 的 话 ， 读 者 也 可 以 直接 通过 访问 
http:/www.phpied.comyfiles/jsoop/ch7.html 来 获取 该 页 面 。 现 在 ， 让 我 们 
打开 控制 台 ， 开 始 吧 。 

7.4.2.1 文档 节点 

document 对 象 给 定 的 就 是 我 们 当前 所 访问 的 文档 。 为 了 对 该 对 象 进 
行进 一 步 探索 ， 我 们 需要 再 次 用 到 控制 台 的 备 筷 功能 。 下 面 ， 在 控制 台 
中 输入 console.dir(document)， 然 后 单 击 展开 其 返回 结果 ( 见 图 7-6) 。 


& CL www.phpied.com/files/jsoop/ch7.htm| 





first paragraph 
second paragraph 


final 


= fl bs = — 
Eel Elements w) Resources © Network ce Sources CB Timeline Si Profiles Y audits | Console | 


> console.dir(document) 
¥ #cdocument 

URL: "http://www. phpied.com/files/jsoop/ch7.html" 

> activeElement: <body> 
alinkColor: "" 

Pall: HTMLALICollection [8] 

> anchors: HTMLCollection[®] 

> applets: HTMLCoLlection[6] 
attributes: null 
baseURI: “http://www. phpied.com/files/jsoop/ch7.html" 
baColor: "" 

> body: <body> 
characterSet: "ISO-8859-1" 
charset: "IS0-8859-1" 





图 7-6 

另外 ， 我 们 也 可 以 通过 控制 台 Elements 选 项 卡 来 浏览 Gocument 对 象 
的 所 有 DOM 属 性 与 方法 ， 如 图 7-7 所 示 。 

如 您 所 见 ， 图 中 所 有 的 节点 (包括 文档 类 市 点 、 文 本 类 季 点 、 元 素 
类 节点 以 及 属性 类 节点 ) 都 拥有 属于 自己 的 nodeType、nodeName 和 
nodeValue 属 性 。 例 如 : 

> document.nodeType; 

9 


人 © | [Ì www.phpied.com/files/jsoop/ch7.html 





first paragraph 
second paragraph 


final 


1 ea G y $ = 
| al Elements | eo) Resources © Network Be Sources CP Timeline Shs Profiles QQ audits Cd Console 


> Computed Style 
v <html> > Styles 





> <head>..</head> å 
> <body>..</body> > Metrics 
</html> v Properties 


¥ #document 

URL: “http://www. phpied.com/fil¢ 

> activeElement: <body> 
alinkColor: "" 

mall: HTMLALLCollection[8] 

> anchors: HTMLCollection[0] 

> applets: HTMLCollection[®6] 
attributes: null 
baseURI: "http://www. phpied. com 
bgColor: "" 

> body: <body> 
characterSet: "IS0-8859-1" 
charset: "IS0-8859-1" 

> childNodes: NodeList[2] 
compatMode: "CSSiCompat" 





图 7-7 
在 DOM 中 ， 节 点 类 型 有 12 种 ， 每 种 类 型 分 别 用 一 个 整数 来 表 
示 。 正 如 您 所 见 ， document 市 点 的 类 型 是 9， 其 他 最 常用 的 节点 类 型 还 
有 1 元素) 、2 属性) 、3 OCA) 。 
另外 ， 这 些 节 点 也 都 有 各 上 自 的 名 字 。 对 于 HIML 标 签 来 说 ， 名 字 一 
般 就 是 具体 标签 的 名 字 〈 即 tagName 属 性 ) 。 而 对 于 文本 节点 来 说 ， 其 
名 字 就 是 #text。 那 么 ，document 节 点 呢 ? 我 们 可 以 来 看 一 下 : 


> document.nodeName; 











"#document" 
同时 节点 也 都 有 各 自 的 节点 值 ， 例 如 ， 文 本 节点 的 值 就 是 它 的 实际 
文本 。 但 document 节 点 中 却 不 包含 任何 值 : 


> document.nodeValue; 


null 

7.4.2.2 documentElement 

现在 ， 让 我 们 将 注意 力 转 移 到 树 结构 上 来 。 通 常 来 说 ， 每 个 XML 
全 有 下 用 于 封装 文档 中 其 他 内 容 的 根 市 点 。 上 其 体 到 HTML X 
档 上 ， 这 个 根 节点 束 是 <html> 标 签 ， 我们 可 以 通过 document 对 象 的 
documentElement 属 性 来 访问 它 。 

> document.documentElement: 

<html>...</html> 

该 属性 的 nodeType 值 为 1〈 即 这 是 一 个 元 素 类 节点 ) : 

> document.documentElement.nodeType; 

1 

对 于 元 素 类 节点 来 说 ， 其 nodeName 和 tagName 属 性 就 等 于 该 标签 本 
JWF: 


> document.documentElement.nodeName; 








"HTML" 

> document.documentElement.tagName; 

"HTML" 

TAD FR 
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hasChildNodes() 方 法 : 


> document.documentElement.hasChildNodes(); 
true 
HTML 元 素 有 三 个 子 节 点 一 一 即 head 元 素 、body 元 素 ， 以 及 两 者 
IAA PR 览 恬 都 会 将 空白 算 在 内 ， 但 不 是 所 有 浏览 右 都 如 
此 ) 。 我 们 可 以 通过 该 元 素 中 的 childNodes 这 个 类 似 于 数组 的 集合 来 访 
问 它们 。 


> document.documentElement.childNodes. length; 


3 

> document.documentElement.childNodes[0]; 

<head>...</head> 

> document.documentElement.childNodes[ 1]; 

#text 

> document.documentElement.childNodes[ 2]; 

<body>...</body> 

任何 子 节 点 都 可 以 通过 其 自身 的 parentNode 属 性 来 访问 它 的 父 节 





> document.documentElement.childNodes[1].parentNode; 
<html>...</html> 

下 面 ， 我 们 将 body 元 素 的 引用 赋值 给 一 个 变量 : 

> var bd = document.documentElement.childNodes[2 |; 


现在 来 看 看 该 元 素 中 有 几 个 子 节 点 : 





> bd.childNodes.length; 
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作为 复习 ， 我 们 再 来 看 看 文档 的 pody 部 分 : 
<body> 


<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 
那么 ， 为 什么 body 有 9 个 节点 呢 ? 让 我 们 来 看 看 ，3 个 段落 加 1 个 注 
释 是 4 个 节点 。 然 后 ， 这 4 个 节点 之 间 的 空 日 处 有 3 个 文本 类 市 点 。 这 样 
一 来 ， 目 前 为 止 就 有 7 个 了 。 男 外 ，body 与 首 个 p 标 签 之 间 有 一 个 空 
处 ， 那 是 第 8 个 ， 而 comment 元 素 与 </body> 标 签 之 间 也 有 一 个 空白 处 ， 





那 又 是 一 个 文本 类 布点 。 一 共 是 9 个 子 节点 。 

7.4.2.4 属性 

由 于 body 的 第 一 个 子 节 点 是 个 空白 ， 因 此 ， 第 二 个 子 节 点 《索引 为 
1) 是 实际 上 的 第 一 个 段落 : 

> bd.childNodes[1]; 

<p cei sn tae paragraph</p> 


我 们 可 以 通过 元 素 的 hasAttributes() 方 法 来 检查 该 元 素 中 是 否 存在 属 























> bd.childNodes[1].hasAttributes(); 
true 


那么 ， 该 元 素 中 有 几 个 属性 呢 ? 当前 示例 中 只 有 一 个 ， 即 class 属 


> bd.childNodes[1].attributes.length; 
1 
我 们 可 以 通过 索引 值 ， 或 属性 名 来 访问 一 个 属性 
也 可 以 调用 getAttribute(0) 方 法 来 获取 相关 的 属性 值 。 
> bd.childNodes| 1 ].attributes[0].nodeName; 
"class" 
> bd.childNodes| 1 ].attributes[0].nodeValue; 
"opener" 
> bd.childNodes|1].attributes['class'].node Value; 
"opener" 
> bd.childNodes[1].getAttribute('‘class'); 
"opener" 
7.4.2.5 访问 标签 中 的 内 容 
下 面 ， 我 们 以 第 一 段 为 例 : 
> bd.childNodes|1].nodeName; 





一 一 一 


。 除 此 之 外 ， 我 们 


"p" 
我 们 可 以 通过 该 元 素 的 textContent 属 性 来 获取 段落 中 的 文本 内 容 。 
如 果 我 们 使 用 的 是 不 支持 textContent 属 性 的 老式 IE 浏 览 器 ， 则 通过 男 一 
个 叫 innerText 的 属性 来 返回 相同 的 值 。 
> bd.childNodes| 1].textContent; 
"first paragraph" 
另外， 我 们 也 可 以 通过 innerHTML 属 性 来 解决 上 述 问 题 。 尺 管 该 属 
性 在 DOM 标准 中 相对 比较 年 轻 ， 但 几乎 所 有 的 主流 浏览 右 对 它 提 供 了 
文 持 。 该 属性 可 返回 《或 设置 ) 指定 市 点 中 的 HTML 代 码 。 因 此 ， 我 们 
也 会 看 到 该 属性 与 document 对 象 之 间 的 不 同 之 处 ， 后 者 返回 的 是 一 个 可 
退 踪 DOM 节点 树 ， 而 前 者 返回 的 只 是 标签 字符 串 而 已 。 但 由 于 
innnerHTML 使 用 极其 方便 ， 以 至 于 它 随处 可 见 。 
> bd.childNodes|1].innerHTML; 
"first paragraph" 
由 于 第 一 段落 中 只 有 文本 ， 所 以 它 的 innerHTML 值 和 
textContent ( IE 中 的 innerText) 完全 相同 。 但 到 了 第 二 段落 中 ， 由 于 
其 中 还 包含 了 em 代码 ， 两 者 的 不 同 就 会 显现 出 来 : 
> bd.childNodes[3].innerHTML; 





"<em>second</em> paragraph" 

> bd.childNodes|3].textContent; 

"second paragraph" 

除 此 之 外 ， 获 得 第 一 段落 的 文本 内 容 还 有 一 种 方式 ， 即 访问 p 节 点 
内 的 文本 节点 ， 读 取 它 的 nodeValue 属 性 : 

> bd.childNodes[1].childNodes.length; 

1 

> bd.childNodes|1].childNodes[0].nodeName; 

"#text" 


> bd.childNodes[1].childNodes[0].nodeValue; 

"first paragraph" 

7.4.2.6 DOM 访问 的 快捷 方法 

通过 childNodes、parentNode、nodeName、nodeValue 以 及 attributes 

HERVE, RATE AER SNRL Pia RATE A 

WERE. EIES, A AND ATR MAB A, FERA 
这 种 DOM 工 作 方式 带 来 一 些 不 稳定 性 出 。 因 为 在 这 种 情况 下 ， 只 要 页 
面 友 生 一 些 细微 变化 ， 我 们 的 脚本 或 许 就 不 能 正常 工作 了 。 田 外 ， 
我 们 访问 的 树 节 点 深度 更 深 一 些 ， 我 们 或 许 束 要 为 此 写 更 多 的 代码 。 
就 是 为 什么 我 们 需要 一 些 ， 此 快捷 方法 来 解决 问题 这 些 方法 分 别 是 
getElementsByTagName()、getElementsByName() 和 getElementById()。 

getElementsByTagName() 以 标签 名 〔 即 元 素 节 点 的 名 字 )〉 为 参数 ， 
返回 当前 HTML 页 面 中 所 有 [匹配 该 标签 名 的 节点 集合 (一 个 类 似 于 数组 
的 对 象 ) 。 例 如 ， 以 下 例子 会 返回 所 有 p 标 和 俭 的 总 数 : 

> document.getElementsByTagName('p').length; 

3 

列表 中 的 各 项 可 以 用 中 括号 法 或 item() 方 法 来 进行 索引 〈 从 0 开始 ) 
访问 。 但 我 们 并 不 推荐 item() 方 法 ， 与 之 相 比 ， 中 括号 法 显然 更 具有 一 
致 性 ， 输 入 也 更 为 简短 : 

> document.getElementsByTagName(‘p')[0]; 























<p class="opener">first paragraph</p> 

> document.getElementsByTagName(‘p').item(0); 

<p class="opener">first paragraph</p> 

下 面 我 们 来 获取 第 一 个 p 元 素 中 的 内 容 : 

> document.getElementsByTagName('p')[0].innerHTML; 
"first paragraph" 


获取 最 后 一 个 〈 即 第 三 个 ) p 元 素 的 内 容 : 

> document.getElementsByTagName(‘p')[2]; 

<p id="closer">final</p> 

对 于 这 些 元 素 的 属性 ， 我 们 可 以 通过 attributes 集合， 或 者 上 面 所 
提 到 的 getAttribute() 方 法 来 进行 访问 。 但 我 们 还 可 以 使 用 一 种 更 为 简便 
的 方法 ， 即 在 运行 时 直接 将 属性 名 当做 元 素 对 象 的 属性 来 访问 。 例 如 ， 
如 果 想 获取 其 id 属性 的 值 ， 我 们 就 可 以 直接 将 id 当做 一 个 属性 。 

> document.getElementsByTagName(‘p')[2].id; 








"closer" 

当然 ， 这 种 方法 对 于 第 一 段落 中 的 class 属性 不 起 作用 。 这 种 异常 
情况 的 原因 在 于 “class” 这 个 词 在 ECMAScript 中 被 设置 成 了 保留 字 。 对 
此 ， 我 们 只 需要 改 用 className 即 可 : 

> document.getElementsByTagName(‘p')[0].className; 





"opener" 

另外 ， 我 们 也 可 以 直接 调用 getElementsByTagName() 方 法 来 获取 页 
面 中 的 所 有 元 素 : 

> document.getElementsByTagName('*').length; 
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由 于 在 IE7 之 前 的 版 本 中 ,，“*” 是 一 个 非法 的 标签 名 ， 所 以 在 这 里 我 
们 可 以 改 用 于 所 支持 的 集合 document.all 来 返回 页 面 中 的 所 有 元 素 ， 尽 

管 我 们 事实 上 很 少 会 用 到 这 类 方法 。 

在 上 面 介 绍 的 快捷 方法 中 ， 还 有 一 个 getElementByld() 方 法 。 这 可 
能 是 最 常用 的 元 素 访 问 方 法 了 了。 只 要 我 们 为 元 素 们 设 定好 各 目的 ID， 然 
后 就 能 轻松 地 访问 这 些 元 素 : 

> document.getElementBylId(‘closer'); 

<p id="closer">final</p> 


现代 浏览 器 也 文 持 其 他 一 些 快捷 方法 ， 包 括 : 





Se neni yl Named 通过 元 素 的 class 属性 寻找 元 素 。 

querySelector(): 通过 CSS 选 择 器 的 方式 寻找 元 素 。 

SR 与 前 一 个 方法 基本 相同 ， 但 上 一 个 方法 仅 返 回 
匹配 的 第 一 个 元 素 ， 这 个 方法 会 返回 所 有 匹配 的 元 素 。 

7.4.2.7 兄弟 节点 、body 元 素 及 首尾 子 节点 

关于 DOM 树 的 导航 操作 ，nextSibling 与 previousSibling 这 两 个 属性 
也 提供 了 一 些 便利 。 例 如 ， 如 果 我 们 获得 了 某 个 元 素 的 引用 : 


> var para = document.getElementByld('closer'); 











> para.nextSibling; 
#text 
> para.previousSibling; 
#text 
> para.previousSibling.previousSibling; 
<p>...</p> 
> para.previousSibling.previousSibling.previousSibling; 
#text 
> para.previousSibling.previousSibling.nextSibling.nextSibling; 
<p id="closer">final</p> 
对 于 body 元 素来 说 ， 以 下 是 一 些 常 用 的 快捷 方式 : 
> document.body; 
<body>...</body> 
> document.body.nextSibling; 
null 
> document.body.previousSibling; 
<head>...</head> 
另外 ，firstChild/lastChild 这 两 个 属性 也 是 非常 有 用 的 。 
firstChild 等 价 于 childNodes[0]， 而 lastChild 则 等 价 于 


N 
4 
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childNodes[childNodes.length - 1]. 
> document.body.firstChild; 
#text 
> document.body.lastChild; 
#text 
> document.body.lastChild.previousSibling; 
<!— and that's about it--> 


> document.body.lastChild.previousSibling.node Value; 


" and that's about it " 

下 面 ， 我 们 用 一 张 截图 来 详细 解析 一 下 body 与 这 三 个 段落 之 间 的 
族谱 关系 。 当 然 ， 为 了 简单 起 见 ， 我 们 在 图 7-8 中 省 略 了 所 有 因 空 白 处 
而 形成 的 文本 类 节点 。 
Seo a OC) 




















nodeType 3 F 
nodeName 
localName 
prefix 
namespaceURI 
nodeValue 
ownerDocument 
parentNode 
nextSibling 
previousSibling 
由 firstChild DocumentType nodeName=him! nodeType=10 
parentNode=dcocument 
由 lastChild html 
由 中 ildNodes NodeList 0=DocumentType 1=htmi length=2 
attributes 
dir per 
baseURI “http: //www-phpied-.com/files/jsoop/ch7-html1" 
textContent null 
图 7-8 
7.4.2.8 ii DOM 
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TAMA. i AE SDOMPY : 
function walkDOM(n) { 
do { 
console.log(n); 
if (n.-hasChildNodes()) { 
walkDOM(n.firstChild); 
} 
} while (n = n.nextSibling); 
} 
下 面 ， 我 们 可 以 来 测试 一 下 : 
> walkDOM(document.documentElement); 
> walkDOM(document.body); 


7.4.3DOM 节 点 的 修 己 


现在 ， 我 们 已 经 掌握 了 许多 访问 DOM 树 节 点 及 其 属性 的 方法 ， 理 
论 上 我 们 已 经 可 以 访问 DOM 树 的 任何 一 个 节点 。 下 面 我 们 来 看 看 如 何 
对 这 些 节点 进行 修改 。 

首先 ， 我 们 将 指向 最 后 段落 的 指针 赋值 给 变量 my: 

> var my = document.getElementByld('closer'); 

接 下 来 ， 我 们 就 能 轻松 地 通过 修改 对 象 的 innerHTML 值 来 修改 段落 
中 的 文本 : 

> my.innerHTML = 'final!!!'; 

"final!!!" 

由 于 innerHTML 可 以 接受 一 个 HTML 代 码 的 字符 串 ， 所 以 我 们 也 可 

以 用 它 在 当前 的 DOM 树 中 再 新 建 一 个 em 节点 : 


> my.innerHTML = '<em>my</em> final’; 





"<em>my</em> final" 
这 样 一 来 。 新 的 em 节点 就 成 为 该 树 结 构 的 一 部 分 
> my.firstChild; 





<em>my</em> 


> my.firstChild.firstChild; 


除 此 之 外 ， 我 们 还 可 以 通过 修改 既定 文本 类 市 点 的 nodeValue 属性 
来 实现 相关 的 文本 修改 ; 
> my.firstChild.firstChild.nodeValue = ‘your’; 


"your" 
7.4.3.1 修改 样式 
很 多 情况 下 ， ei ies nee 点 的 内 容 ， 而 是 样式 。 
元 素 对 象 中 还 有 一 个 style 属 性 ， 这 是 一 个 用 来 反映 当前 CSS 样 式 的 属 


性 。 例 如 ， 通 过 修改 某 段落 的 age ， 就 可 以 给 它 加 上 一 个 红色 的 边 
HE: 
> my.style.border = "1px solid red"; 
"1px solid red" 
另外 ， 在 JavaScript 命 名 规范 中 ，CSS 属 性 中 的 短线 CBN) 是 不 可 
用 的 。 对 于 这 种 情况 ， 我 们 只 需要 直接 路 过 并 将 下 一 个 单词 的 首 字 母 大 
写 即 可 。 例 如 ，padding-top 可 以 写成 paddingTop、margin-left 可 以 写成 
marginLeft 等 ， 以 此 类 推 。 
> my.style.fontWeight = 'bold’; 
"bold" 
我 们 也 可 以 通过 style 的 cssText 属 性 ， 将 CSS 样 式 当 作 字 符 串 来 处 
FH 
> my.style.cssText; 


"border: 1px solid red; font-weight: bold;" 


这 样 一 来 ， 对 CSS 属 性 的 修改 就 被 归结 为 字符 串 操 作 : 

> my.style.cssText += " border-style: dashed;" 

"border: 1px dashed red; font-weight: bold; border-style: dashed;" 

7.4.3.2 玩 转 表 单 

正如 之 前 所 述 ，JavaScript 是 一 种 很 好 的 客户 并 输入 验证 方式 ， 它 能 
蔡 我 们 节省 一 些 与 服务 器 的 通信 。 下 面 ， 让 我 们 以 当下 最 流行 的 页 面 
Google.com 的 表单 为 例 ， 来 实际 操练 一 下 表单 操作 《〈 见 图 7-9) 。 











Google Search I'm Feeling Lucky 





图 7-9 

首先 ， 我 们 使 用 querySelector() 方 法 ， 按 照 CSS 选 择 器 规则 ， 选 取 页 
面 中 的 第 一 个 文本 输入 框 : 

> var input = document.querySelector(‘input[type=text]'); 

接 下 来 我 们 试 着 访问 我 们 所 选 定 的 搜索 框 : 

> input.name; 

"q" 

然后 ， 我 们 通过 设置 value 属 性 来 改变 搜索 框 中 的 文字 : 


> input.value = 'my query’; 








"my query" 
我 们 来 恶搞 一 下 ， 将 按钮 中 的 单词 Lucky 蔡 换 为 Tricky: 
> var feeling = document.querySelectorAll("button")[2]; 
> feeling.textContent = feelingtextContent.replace(/Lu/, 'Tri'); 


"Im Feeling Tricky" 








my query 


Google Search I'm Feeling Tricky 





图 7-10 
下 和 面 ， 我 们 来 实现 这 个 “tricky” 功 能 ， 即 令 按 钮 一 秒 钟 显示 或 隐藏 
一 次 。 我 们 可 以 通过 一 个 叫做 toggle() 的 简单 函数 来 实现 。 当 该 函数 每 次 
被 调用 时 ， 它 会 自动 检查 该 按钮 的 CSS 属 性 visibility 值 ， 如 果 
为 "hidden"， 则 将 其 设置 为 "visible"。 反 之 亦 然 。 
function toggle(){ 





var st = document.querySelectorAll('button')[21].style; 
st.visibility = (st.visibility === ‘hidden') 
? 'visible' 
: ‘hidden’; 
} 
当然 ， 该 函数 不 是 靠 手 动 调用 的 ， 我 们 还 得 设置 一 个 计时 右 ， 令 其 
每 秒 钟 被 调用 一 次 : 
> var myint = setInterval(toggle, 1000); 
知道 会 有 什么 效果 吗 ? 按钮 会 不 停 地 闪烁 《这 给 单 击 融 来 了 一 定 的 
MERE) 。 当 然 ， 如 果 您 玩 大 了 ， 只 要 取消 计时 器 即 可 。 


> clearInterval(myint); 
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通常 情况 下 ， 我 们 可 以 用 createElement() 和 createTextNode() 这 两 个 
方法 来 创建 新 节点 。 而 appendChild()、insertBefore() 和 replaceChind() 三 
个 方法 则 可 以 用 来 将 新 节点 过 加 到 DOM 树 结构 中 。 


让 我 们 回 到 页 面 http://www.phpied.conyfiles/jsoop/ch7.html， 打 开 控 
制 台 ， 然 后 开始 吧 ! 
下 面 ， 我 们 创建 一 个 新 的 p 元 素 ， 并 对 它 的 innerHTML 属 性 进行 设 
置 : 
> var myp = document.createElement('p'); 
> myp.innerHTML = yet another’; 
"yet another" 
一 般 来 说 ， 被 新 建 的 元 素 会 目 动 获得 所 有 的 默认 属性 ， 例 如 style， 
我 们 可 以 对 它 进 行 修改 : 
> myp.style; 
CSSStyleDeclaration 
> myp.style.border = '2px dotted blue’; 
"2px dotted blue" 
通过 appendChild(0) 方 法 ， 我 们 可 以 将 新 节点 添加 到 DOM 树 结构 中 
去 。 并 且 ， 该 方法 应 该 是 在 document,body 上 被 调用 的 ， 这 指定 了 新 节点 
应 该 被 创建 在 该 对 象 最 后 一 个 子 节点 的 后 面 。 
> document.body.appendChild(myp); 








<p style="border: 2px dotted blue;">yet another</p> 
下 面 是 一 张 新 节 点 载 入 页 面 之 后 的 效果 图 〈( 见 图 7-11): 





first paragraph 


second paragraph 


final 


:yet another 


图 7-11 

7.4.4.1 纯 DOM 方法 

通 第 情况 下 ， 使 用 innerHTML 来 设置 内 容 会 更 便捷 一 些 ， 如 末 要 使 
用 纯 DOM 方 法 ， 我 们 就 必须 : 

1. 新 建 一 个 内 容 为 "yet another" 的 文本 节点 。 

2. 再 新 建 一 个 段落 节点 。 

3. 将 文本 节点 添加 为 段落 市 点 的 子 节 点 。 

4. 将 段落 市 点 添加 为 body 的 子 厄 点 。 

通过 这 种 方式 ， 我 们 可 以 创建 任意 数量 的 文本 节点 和 元 素 ， 并 随心 
所 欲 地 安排 它们 之 间 的 嵌 套 关系 。 让 我 们 再 来 看 一 个 例子 ， 如 果 您 想 将 
下 面 的 HTML 人 代码 加 入 body 元 素 的 后 端 : 

<p>one more paragraph<strong>bold</strong></p> 

也 就 是 说 ， 我 们 所 要 提交 的 东西 有 如 下 结构 : 


P element 











text node with value "one more paragraph" 
STRONG element 
text node with value "bold" 


让 我 们 来 看 看 完成 这 个 代码 应 该 怎么 写 : 


// create P 

var myp = document.createElement('p'); 

// create text node and append to P 

var myt = document.createTextNode(‘one more paragraph’); 
myp.appendChild(myt); 

// create STRONG and append another text node to it 

var str = document.createElement('strong’'); 
str.appendChild(document.createTextNode('bold’)); 

// append STRONG to P 

myp.appendChild(str); 

// append P to BODY 

document.body.appendChild(myp); 

7.4.4.2 cloneNode() 

男 外 ， 找 贝 (或 克隆 ) 现 有 市 点 也 是 一 种 创建 节点 的 方法 。 这 需要 





用 到 cloneNode() 方 法 ， 该 方法 有 一 个 布尔 类 型 的 参数 (true = RIN, 





ALAA Ps false = 浅 拷贝 ， 只 针对 当前 节点 ) 。 下 面 。 让 我 们 来 
测试 一 下 该 方法 。 


Üi: 


首先 ， 我 们 获取 需要 克隆 元 系 的 引用 : 

> var el = document.getElementsBy TagName(‘p')[1]; 
现在 ，el 指 向 了 页 面 中 的 第 二 个 段落 ， 内 容 如 下 : 
<p><em>second</em> paragraph</p> 


然后 ， 我 们 来 建立 一 份 el 的 浅 找 贝 ， 并 将 其 添加 到 body 元 素 的 末 


> document.body.appendChild(el.cloneNode(false)); 
这 时 候 ， 我 们 在 页 面 上 不 会 看 出 有 什么 变化 ， 因 为 浅 找 贝 只 复制 了 


p 节 点 ， 并 没有 包含 它 的 任何 子 节 点 。 这 意味 着 该 段落 中 文本 即 其 中 
的 文本 类 节点 ) 并 没有 复制 过 来 。 也 就 是 说 ， 这 行 代码 的 作用 就 相对 


T: 

> document.body.appendChild(document.createElement('p')); 

但 如 果 我 们 现在 创建 的 是 一 份 深 拷贝 ， 那 么 以 p 元 素 为 首 的 整个 
DOM 了 于 树 都 将 会 被 拷贝 过 来 ， 其 中 包含 了 文本 节点 和 em 元 素 。 这 行 代 
码 将 第 二 段 复制 并 插入 到 了 文本 末 疹 。 

> document.body.appendChild(el.cloneNode(true)); 

如 果 您 愿意 的 话 ， 也 可 以 只 拷贝 其 中 的 em 元 素 : 

> document.body.appendChild(el.firstChild.cloneNode(true)); 

<em>second</em> 

或 者 只 拷贝 内 容 为 "second" 的 文本 节点 : 

> document.body.appendChild( 

el.firstChild. firstChild.cloneNode(false)); 
"second" 

7.4.4.3 insertBefore() 

通过 appendChild() 方 法 ， 我 们 只 能 将 新 节点 添加 到 指定 节点 的 末 
端 。 如 果 想 更 精确 地 控制 插入 节点 的 位 置 ， 我 们 还 可 以 使 用 
insertBefore() 方 法 。 该 方法 与 appendChild0 基 本 相同 ， 只 不 过 它 多 了 一 
个 额外 参数 ， 该 参数 可 以 用 于 指定 将 新 市 点 插入 哪 一 个 元 素 的 前 面 。 例 
如 在 下 面 的 代码 中 ， 文 本 节点 被 插入 body 元 际 的 末 疹 : 

> document.body.appendChild(document.createTextNode('boo!')); 

我 们 也 可 以 将 同样 的 文本 节点 添加 为 body 元 素 的 第 一 个 子 节 点 : 


document.body.insertBefore( 








document.createTextNode('boo!'), 


document.body.firstChild 
); 


7.4.5 移 除 节点 


要 想 从 DOM 树 中 移 除 一 个 节点 ， 我 们 可 以 调用 removeChild()。 下 
让 我 们 再 次 以 body 元 素 为 例 : 
<body> 


=i 


<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 
我 们 移 除 第 二 段落 : 
> var myp = document.getElementsByTagName(‘p')[1]; 
> var removed = document.body.removeChild(myp); 
WRB a E m H BUR RA, A RATT IE IR 
回 值 。 尺 管 该 市 点 已 经 不 在 DOM 树 结构 中 ， 但 我 们 依然 可 对 其 调用 所 
有 的 DOM 方 法 : 


> removed; 





<p>...</p> 

> removed. firstChild; 

<em>second</em> 

BRI Zab, A —SreplaceChildQ7i&, WATE WATER BR A 
点 的 同时 将 另 一 个 节点 放 在 该 位 置 。 下 面 ， 我 们 来 看 看 之 前 移 除 节 点 之 
后 的 情况 ， 现 在 的 树 结 构 应 该 是 这 样 : 

<body> 





<p class="opener">first paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 
ME, BO ROAM SIDA" closer" 708 : 


> var p = document.getElementsByTagName(‘p')[1]; 

> P; 

<p id="closer">final</p> 

我 们 用 removed 变 量 中 的 段落 蔡 换 掉 变 量 p 指 回 的 段落 : 

> var replaced = document.body.replaceChild(removed, p); 

与 reamoveChild0 相 似 ，replaceChild0) 方 法 也 会 返回 被 移 除 节点 的 引 


> replaced; 
<p id="closer">final</p> 
现在 ，body 元 系 中 的 内 容 如 下 : 
<body> 
<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<!-- and that's about it --> 
</body> 
如 果 我 们 想 将 东 个 子 树 中 的 内 容 一 并 抹 去 的 话 ， 最 便捷 的 方式 是 就 
将 它 的 innerHITML 设 置 为 空 字符 串 。 下 面 我 们 移 除 body 中 的 所 有 子 节 
Fl: 
> document.body.innerHTML = "; 
我 们 来 测试 一 下 : 
> document.body.firstChild 
null 
使 用 innerHTML 来 移 除 确 实 很 容易 ， 但 如 果 我 们 只 使 用 纯 DOM Ù 
法 的 话 ， 束 必须 对 其 所 有 的 子 节 后进 行 表 历 并 逐个 删除 它们 。 下 面 ， 我 
们 给 出 了 一 个 用 于 删除 茶 个 指定 节点 所 有 子 节 点 的 函数 : 


function removeAll(n) { 








while (n.firstChild) { 
n.removeChild(n.firstChild); 
} 
} 
如 果 我 们 想 删 除 body 中 的 所 有 子 节点 ， 将 页 面 变 成 一 个 空 <body> 
</body> 的 话 ， 可 以 : 


> removeAll(document.body); 


7.4.6 只 适用 于 HTML 的 DOM 对 和 象 


正如 我 们 所 知 ， 文 档 对 象 模 型 同时 适用 于 XML 和 HTML 文 档 。 
面 ， 我 们 已 经 学 习 了 如 何 对 树 结构 进行 通 历 ， 并 添加 、 删 除 、 pen 
XML ”文档 树 中 的 节点 。 但 是 ， 还 有 一 些 对 象 和 属性 是 只 适用 于 HTML 
的 。 

例如 ，document.body 就 是 一 个 纯 HTML 对 象 。 但 它 的 应 用 是 如 此 
的 常见 ， 只 要 HIML ”文档 中 包含 了 <body> 标 签 束 可 以 访问 ， 其 功能 等 
价 于 document.getElements ByTagName(body")[0]， 但 调用 方式 则 要 友好 
得 多 。 

document.body 是 一 个 典型 的 、 根 据 史前 标准 DOM Level nage 
特性 扩展 而 来 的 DOM 对 象 。 像 document.body 这 样 的 对 象 还 有 不 少 ， 
些 对 象 中 ， 有 些 在 Core DOM 组件 中 是 找 不 到 等 价 物 的 ， a 
以 ， 但 普遍 都 在 DOM 0 标准 的 基础 上 做 了 一 定 的 简化 。 下 面 ， 让 我 们 来 
了 解 一 下 这 些 对 象 。 

7.4.6.1 访问 文档 的 基本 方法 

与 如 今 DOM 组 件 可 以 访问 页 面 中 的 任何 元 素 〈 甚 至 包括 注释 和 空 
白 处 ) 不 同 的 是 ， JavaScript 最 初 所 能 访问 的 内 容 只 局 限于 一 些 HTML 
文档 中 的 元 素 。 其 主要 由 以 下 一 系列 集合 对 象 组 成 。 














当前 页 面 中 所 有 图 片 的 集合 ， 等 价 于 Core 
DOM 组 件 中 的 document.getElementsByTagName(img) 调 用 。 

等 价 于 
document.getElementsByTagName('applets')。 


document.images 





document.applets 





document.links. 

document.anchors. 

document.forms. 

其 中 ，document.links 是 一 个 列表 ， 它 包含 了 页 面 中 所 有 的 <a 
href="..."></a> 标 签 ， 也 就 是 页 面 中 所 有 含有 href 属 性 的 A 标签 
document.anchors 中 包含 的 则 是 所 有 带 name 属性 的 链接 〈 即 <a 
name="..."></a>) 。 

而 使 用 最 广泛 的 还 是 要 数 document.forms 集 合 了 ， 这 是 一 个 <form> 
标签 的 列表 。 也 就 是 说 ， 我 们 可 以 这 样 访问 页 面 中 的 第 一 个 form 元 素 : 

> document.forms[0]; 

这 就 相当 于 我 们 调用 : 

> document.getElementsByYTagName(form')[0]; 

document.forms 集合 中 包含 一 系列 的 input 字段 和 按钮 ， 我 们 可 以 
通过 该 对 象 的 elements 属 性 来 访问 它们 。 下 面 我 们 访问 页 面 中 第 一 个 
form 元 素 中 的 第 一 个 input 字 段 : 

> document.forms[0].elements[0]; 

一 旦 我 们 获得 了 茶 个 元 系 的 访问 权 ， 束 可 以 通过 对 象 同名 属性 访问 
该 元 素 的 属性 。 现 在 假设 第 一 个 form 元 素 的 首 字段 如 下 : 


<input name="search" id="search" type="text" 





size="50"maxlength="255" value="Enter email..." /> 
那么 ， 我 们 就 可 以 通过 茶 种 方法 改变 该 字段 中 的 文本 《〈《 即 其 value 属 
性 的 值 ) ， 例 如 


> document.forms[0].elements[0].value = 'me@example.org’; 


"me@example.org" 
如 果 想 将 该 字段 动态 地 设置 为 不 可 用 的 话 ， 我 们 也 可 以 : 
> document.forms[0].elements[0].disabled = true; 
为 外 ， 如 果 form 本 吴 或 者 form 中 的 元 素 拥 有 name 属 性 的 话 ， 我 们 也 
可 以 通过 名 字 来 访问 : 
> document.forms[0].elements['search'];// array notation 
> document.forms[0].elements.search; // object property 
7.4.6.2 document.write() 
通过 document.write() 方 法 ， 我 们 可 以 在 当前 页 面 载 入 时 插入 一 些 
HTML 元 素 ， 例 如 ， 我 们 可 以 : 
<p>It is now 
<script> 
document.write("<em>" + new Date() + "</em>"); 
</script> 
</p> 
其 效果 与 我 们 直接 在 HTML 文档 中 插入 相关 日 期 相同 : 
<p>It is now 
<em>Fri Apr 26 2013 16:55:16 GMT-0700 (PDT)</em> 
</p> 
需要 注意 的 是 ， 我 们 只 能 在 页 面 正 在 被 载 入 时 调用 document.write() 
方法 ， 如 果 我 们 试图 在 页 面 载 入 之 后 调用 该 方法 ， 整 个 页 面 的 内 容 都 会 
BL E RFA 
事实 上 ， 我 们 很 少 需要 用 到 document.write() 方 法 ， 如 果 您 觉得 需要 
的 话 ， 那 就 应 该 先 党 试 一 下 其 他 方法 。 毕 竟 就 修改 页 面 内 容 而 言 ， 
DOM Level 1 所 提供 的 方法 要 简单 灵活 得 多 。 
7.4.6.3 Cookies. Title, Referrer, Domain 
FER, BATE AE STR SP SRE, RS eT 





DOM Level 0 移植 到 DOM Level 1 的 HTML 扩 展 。 并 且 ， 这 些 属 性 与 之 
前 所 介绍 的 属性 不 一 样 ， 它 们 在 Core DOM 中 并 没有 等 价 物 。 

document.cookie 属 性 实际 上 是 一 个 字符 串 ， 其 中 存储 了 用 于 往返 服 

务 器 端 与 客户 端 之 间 的 cookie 信息 。 每 当 服 务 器 向 浏览 器 发 送 页 面 时 ， 

往往 都 会 发 送 ”Set-Cookie 这 一 HITP 头 。 当 客户 端 客 户 端 再 回 服 务 器 发 
送 请 求 时 ， 客 户 端 也 会 将 cookie 信 息 写 入 Cookie 这 一 HITP 头 。 通 过 
document.cookie 属 性 ， 我 们 可 以 对 浏览 器 的 cookie 信 息 进行 某 些 操 作 。 
下 面 我 们 来 看 一 个 示例 ， 先 访问 cnn.com 网 站 ， 然 后 在 控制 台中 输入 
document.cookie: 

> document.cookie; 

"mbox=check#true#1356053765lsession#1356053704195- 
121286#1356055565;... 

document.title 属性 则 是 被 用 来 修改 页 面 在 浏览 器 窗口 中 所 显示 的 标 
题 的 。 下 面 依 然 以 cnn.com 网 站 为 例 ， 我 们 可 以 这 样 做 : 

> document.title = 'My title’; 

"My title" 

但 要 注意 的 是 ， 这 里 并 没有 改变 <title> 标 签 本 吴 的 值 ， 只 是 改变 了 
其 在 浏览 器 窗口 中 的 显示 内 容 。 所 以 ， 该 集合 并 不 等 价 于 
document.querySelector('title’) . 

document.referrer 中 记录 的 是 我 们 之 前 所 访问 过 的 页 面 URL。 这 与 
浏览 器 在 请 求 页 面 时 所 发 送 的 HTTP 头 信息 中 的 Referer 值 是 相同 的 (要 
注意 的 是 ，HTTP 头 信息 中 的 Referer 在 拼写 上 是 错误 的 ， 而 
documentreferrer 则 是 正确 的 _ 饭 ) 。 例 如 ， 如 果 您 是 通过 Yahoo! 搜 索 来 
访问 CNN 主 页 的 ， 我 们 就 会 看 到 如 下 信息 : 


> document.referrer; 














"http://search.yahoo.com/search?p=cnn&ei=UTF-8&fr=moz2" 


通过 document.domain， 我 们 可 以 得 到 当前 所 载 入 页 面 的 域名 。 我 们 
经 常 在 某 些 跨 域 调用 中 用 到 它 。 可 以 想象 一 下 ， 如 果 yahoo.com 的 主页 
中 有 一 个 iframe 标 签 ， 其 中 所 载 入 的 内 容 却 是 来 自 music.yahoo.com。 它 
们 是 两 个 不 同 的 域 ， 根 据 一 般 浏览 器 的 安全 规则 ， 通 常情 况 下 是 不 允许 
页 面 与 该 iframe 进 行 交互 的 。 这 时 候 ， 如 果 我 们 想 实 现 这 两 个 页 面 之 
间 * 交 谈 ”， 束 需要 用 document.domain 将 相关 的 域 全 都 设置 为 








yahoo.com. 
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www.yahoo.com 的 域 可 以 被 改 为 yahoo.com， 但 yahoo.com 的 域 就 不 能 
被 改 为 www.yahoo.com 或 其 他 非 yahoo 域 名 了 。 
> document.domain; 
"www.yahoo.com" 
> document.domain = 'yahoo.com’; 
"yahoo.com" 
> document.domain = 'www.yahoo.com’; 
Error: SecurityError: DOM Exception 18 
> document.domain = 'www.example.org’; 
Error: SecurityError: DOM Exception 18 
之 前 在 本 章 中 ， 我 们 曾经 为 您 介绍 过 window.location 对 象 。 那 么 ， 
实际 上 我 们 也 可 以 用 document.location 来 实现 相同 的 功能 : 


> window.location === document.location; 





true 


7.5 事件 


想象 一 下 ， 如 果 您 突然 在 收音 机 里 听 到 有 人 宣布 :“ 大 事件 ! 重大 
事件 ! 外 星人 登陆 地 球 了 1! ?或许 您 的 反应 是 “ 耶 ， 我 无 所 谓 ! ”， 但 有 
些 听 众 可 能 会 觉得 “它们 是 和 平 使 者 ! ”， 而 另 一 些 则 可 能 会 觉得 “这 下 
所 有 人 都 要 死 了 ! ”。 同 样 的 ， 浏 览 右 中 所 发 生 的 事件 也 能 以 广播 收听 
和 监听 的 形式 传递 给 相关 的 代码 。 这 些 事件 包括 : 

用 户 单 击 某 一 按钮 ; 

用 户 在 某 一 表单 域 中 输入 字符 ; 

某 页 面 载 入 完成 。 

我 们 可 以 为 这 些 事件 指定 相应 的 JavaScript 函数 ， 这 些 函 数 通常 被 
称 为 事件 监听 器 (event listener) 或 事件 处 理 器 (event handler) 。 这 样 
一 来 ， 浏 览 器 就 会 在 相关 事件 发 生 时 执行 既定 的 函数 。 下 面 ， 我 们 来 看 
看 具体 是 如 何 实 现 的 。 











7.5.1 内 联 HIML 属 性 Y 








最 简便 也 最 难以 维护 的 方式 就 是 通过 标签 的 特定 属性 来 添加 事件 ， 
例如 : 

<div onclick="alert('Ouch!')">click</div> 

在 这 种 情况 下 ， 只 要 该 <div> 所 在 的 区 域 被 用 户 单 击 了 ， 就 会 触发 
该 标签 的 单 击 事 件 。 与 此 同时 ， 其 ondlick 属 性 中 的 字符 串 就 会 被 当做 
JavaScript 代 码 来 执行 。 尽 管 ， 这 里 并 没有 显 式 指定 监听 单 击 事件 的 函 
数 ， 但 相关 环境 在 幕后 已 经 为 此 创建 了 一 个 函数 ， 函 数 的 代码 就 等 于 我 
们 为 onclick 属 性 设 定 的 值 。 





7.5.2 JL PY 


关于 单 击 事件 函数 ， 我 们 还 有 另 一 种 编写 方式 ， 那 就 是 将 其 设置 为 
DOM 元 素 节点 的 属性 。 例 如 : 


<div id="my-div">click</div> 





<script> 
var myelement = document.getElementByld(‘my-div'); 
myelement.onclick = function() { 
alert(‘Ouch!’); 
alert('And double ouch!'); 
} 

</script> 

事实 上 这 也 是 一 种 更 好 的 选择 。 因 为 这 种 方式 可 以 帮助 我 们 理 清 
<div> 与 相关 JavaScript 代 码 之 间 的 关系 。 一 般 情 况 下 。 我 们 总 是 希望 页 
面 中 的 内 容 归 HIML、 行 为 归 JavaScript、 格 式 归 CSS， 并 且 三 者 之 间 
应 该 尽 可 能 彼此 独立 ， 互 不 干扰 。 

但 这 个 方法 也 是 有 缺点 的 ， 因 为 这 种 做 法 只 人 允许 我 们 指定 一 个 事件 
函数 ， 这 就 好 像 我 们 的 收音 机 上 只 能 有 一 个 听众 一 样 。 当 然 ， 我 们 可 以 对 
多 个 事件 使 用 同一 个 处 理 函 数 ， 但 这 样 做 始终 不 太 方 便 ， 就 好 像 我 们 每 
次 都 得 让 所 有 的 收音 机 听众 都 集中 在 一 个 房间 里 一 样 。 


7.5.3 DOM 的 事件 监听 绒 





对 于 浏览 器 来 说 ， 最 佳 的 事件 处 理 方式 当然 莫 过 于 出 自 DOM Level 
2 的 事件 监听 器 了 。 通 过 这 种 方式 ， 我 们 可 以 为 一 个 事件 指定 多 个 监听 
器 函数 。 当 事件 被 触发 时 ， 所 有 的 监听 器 函数 都 会 被 执行 。 而 且 ， 这 些 
监听 器 之 间 不 需要 知道 彼此 的 存在 ， 它 们 的 工作 是 彼此 独立 的 。 任 何 一 





个 函数 的 加 入 或 退出 都 不 会 影响 其 他 监听 器 的 工作 。 

现在 ， 让 我 们 回 到 上 一 节 中 的 那个 简单 标志 页 (您 也 可 以 直接 访问 
http://www. phpied.com/files/jsoop/ch7.html〉， 我 们 所 拥有 的 标志 是 : 

<p id="closer">final</p> 

我 们 可 以 通过 addEventListener() 方 法 为 单 击 事件 赋予 相关 的 监听 
器 。 下 面 我 们 尝试 赋予 两 个 监听 器 : 


var mypara = document.getElementByld('closer'); 





mypara.addEventListener('click', function(){ 
alert(Boo!') 
}, false); 
mypara.addEventListener( 
‘click’, console.log.bind(console), false); 
如 您 所 见 ，addEventListeners() 方 法 是 基于 某 一 节点 对 象 来 调用 的 。 
它 的 首 参 数 是 一 个 事件 类 型 的 参数 ， 第 二 个 参数 是 一 个 函数 指针 ， 它 可 
以 是 function(){alert (Boo!")} 这 样 的 匿名 函数 ， 也 可 以 是 console.log0 这 
样 的 现存 函数 。 该 监 昕 器 函数 会 在 相关 事件 发 生 时 被 调用 ， 调 用 时 会 接 
收 到 一 个 事件 对 象 参数 。 如 果 我 们 运行 上 面 的 代码 ， 就 可 以 在 控制 台 看 
到 所 记录 的 事件 对 象 。 单 击 事件 对 象 可 以 碍 看 其 属性 〈 见 图 7-12) 。 














(x) Ea Elements Resources © Network os Sources 


vMouseEvent {webkitMovementy: 6, webkitMovementx: 
altKey: false 
bubbles: true 
button: @ 
cancelBubble: false 
cancelable: true 
charCode: 0 
clientX: 19 
clientY: 92 
clipboardData: undefined 
ctrlkey: false 
currentTarget: null 
dataTransfer: null 
defaultPrevented: false 
detail: 1 
eventPhase: 0 
fromElement: null 
keyCoce: @ 
layerX: 19 
layerY: 92 
metaKey: false 
offsetX: 11 
offsetY: B 
pageX: 19 
pageY: 92 
relatedTarget: null 
returnValue: true 
screenX: 254 
screeny: 186 
shiftKey: false 
srcElement: <p> 
target: <p> 
timeStamp: 1356056143153 
toElement: <p> 
type: “click” 
view: Window 
webkitMovementxX: @ 
webkitMovementY: @ 
which: 1 
x: 19 
y: 92 

bp proto__: MouseEvent 











在 之 前 调用 addEventListener() 方 法 的 过 程 中 ， 我 们 还 传 入 了 第 三 个 
参数 false。 下 面 我 们 来 看 看 这 个 参数 是 什么 。 

假设 我 们 有 一 个 链接 ， 它 被 称 套 在 一 个 无 序列 表 标 签 内 ， 例 如 : 

<body> 


<ul> 





<li><a href="http://phpied.com">my blog</a></li> 
</ul> 

</body> 

当 我 们 单 击 该 链接 时 ， 实 际 上 我 们 也 单 击 了 列表 项 <li>、 列 表 
<ul>, <body> J3 E F^ document 对 象 ， 这 种 行为 称 之 为 传播 
(propagation) 。 换 句 话说 ， 对 该 链接 的 单 击 也 可 以 看 做 对 document 对 
象 的 单 击 。 事 件 传播 过 程 通常 有 两 种 方式 : 

事件 捕捉 〈event capturing) 一 一 单 击 首先 发 生 在 document 上 ， 然 
后 依次 传递 给 body、 列 表 、 列 表 项 ， 并 最 终 到 达 该 链接 ， H TN 

事件 冒 泡 〈event bubbling) 一 一 单 击 首先 发 生 在 链接 上 ， 然 后 逐 层 
向 上 冒 泡 ， 直 至 document 对 象 ， 称 为 冒 泡 法 。 

按照 DOM Level 2 的 建议 ， 事 件 传播 应 该 分 成 三 个 阶段 : 先是 捕捉 
标签 ， 然 后 到 达 对 象 ， 再 冒 泡 ( 见 图 7-13) 。 也 就 是 说 ， 事 件 传 播 的 路 
径 应 该 是 先 从 document 到 相关 链接 (标签) ， 然 后 回 到 document。 如 果 
想 要 了 解 某 一 事件 当前 所 处 的 阶段 ， 我 们 可 以 去 访问 事件 对 象 的 
eventPhase 属 性 。 





ONNesng 
: Il ISWHd 


PHASE | : 
CAPTURING 





CLICK ! 
PHASE II : 
AT TARGET 
图 7-13 
从 历史 上 来 说 ，IE 和 Netscape (当时 业界 并 没有 一 个 统一 的 标准 可 
以 遵循) 的 相关 实现 是 高 度 不 统一 的 。 焉 使 用 冒 泡 法 ， 而 Netscape 则 只 
使 用 捕捉 法 。 而 在 当今 ， 也 就 是 DOM 标 准 建立 之 后 ， 现 代 浏 览 器 们 终 
末代 二 现下 这 三 个 阶段 有 
我 们 可 以 通过 如 下 方式 处 理事 件 捕获 : 
通过 addEventListener() 的 第 三 个 参数 ， 我 们 可 以 决定 代码 是 否 采 用 
捕捉 法 来 处 理事 件 。 然 而 ， 为 了 让 我 们 的 代码 适用 于 更 多 的 浏览 器 ， 最 
好 还 是 始终 将 其 设置 为 false， 即 只 使 用 冒 泡 法 来 处 理事 件 。 
我 们 也 可 以 在 监听 器 函数 中 阻 断 事 件 的 传播 ， 令 其 停止 同上 冒 泡 ， 
这 样 一 来 ， 事 件 就 不 会 再 到 达 document 对 象 那里 了 。 为 了 做 到 这 一 点 ， 
我 们 就 必须 去 调用 相关 事件 对 象 的 stopPropagation0 方 法 (相关 示例 我 们 
将 会 在 下 一 节 中 看 到 〉。 
另外 ， 我 们 还 可 以 采用 事件 委托 。 例 如 ， 如 果 某 个 <div> 中 有 10 个 
按钮 ， 那 么 ， 通 第 每 个 按钮 都 需要 一 个 事件 监听 器 ， 这 样 一 来 ， 我 们 就 











要 设置 10 个 监听 器 函数 。 而 更 聪明 的 做 法 是 ， 我 们 只 为 整个 <div> 设 置 
一 个 监 昕 器 ， 当 事件 发 生 时 ， 让 它 自己 去 判断 被 单 击 的 是 哪 一 个 按钮 。 

作为 参考 ， 我 们 还 是 要 介绍 一 下 在 旧版 本 的 TE 中 使 用 事件 捕捉 的 
方式 ， 即 使 用 setCapture() 和 releaseCapture0 方 法 ， 但 是 这 种 方式 只 适用 
于 处 理 鼠 标 类 事件 ， 对 于 其 他 类 型 的 事件 (例如 键盘 类 事件 ) 则 不 起 作 
用 。 








7.5.5 BH rte tt 


下 面 ， 我 们 来 演示 一 下 如 何 让 事件 停止 它 的 冒 泡 式 传 播 。 首 先 ， 我 
们 回 到 之 前 的 测试 文档 ， 现 有 的 标签 是 : 

<p id="closer">final</p> 

然后 ， 我 们 来 定义 一 个 用 于 处 理 该 段落 单 击 事件 的 函数 : 


function paraHandler(){ 








alert('clicked paragraph’); 
} 
WE, RITZ K Be EA E SE BY E T A : 
var para = document.getElementById('closer'); 
para.addEventListener('click', paraHandler, false); 
ET, RAIE KZ Ah A a tx 2 body. document, J3&F 
整个 浏览 器 的 window 对 象 : 
document.body.addEventListener('click’, function(){ 
alert (‘clicked body’); 
}, false); 
document.addEventListener(‘click’, function(){ 
alert (‘clicked doc’); 
}, false); 


window.addEventL istener(‘click’, function(){ 
alert (‘clicked window’); 
上 cae 
要 注意 的 是 ， 按 照 DOM 标 准 来 次，window 事 件 是 不 存在 的 。 这 
人 因此 ， 实 际 上 浏览 器 对 于 
window 事 件 的 实现 与 DOM 事 件 的 实现 并 不 一 致 。 
现在 ， 如 果 我 们 单 击 一 下 该 段落 ， 就 会 看 到 四 个 警告 窗 ， 它 们 分 别 





FE: 

clicked paragraph; 

clicked body; 

clicked doc; 

clicked window. 

这 诠释 了 同一 单 击 事件 从 具体 标签 癌 整 个 窗口 传播 的 全 过 程 〈 也 就 
是 同上 冒 泡 的 全 过 程 〉。 

addEventListener() 方 法 的 对 江面 就 是 ”removeEventListener()， 该 方 
法 的 参数 与 前 者 相同 。 下 和 面 ， 我 们 移 除 该 段落 上 的 监听 絮 。 

> para.removeEventListener('click’, paraHandler, false); 

现在 如 果 再 次 单 击 段 洲 ， 就 只 会 阐 出 body、document 对 象 及 window 
对 象 的 单 击 事件 窗 ， 不 再 有 针对 该 段落 的 弹出 窗 了 。 

下 面 ， 我 们 来 阻 断 事 件 的 传播 。 首 先 要 定义 一 个 以 事件 对 象 为 参数 
的 函数 ， 并 在 函数 内 对 该 对 象 调 用 stopPropagation() 方 法 : 


function paraHandler(e){ 








alert(‘clicked paragraph’); 
e.stopPropagation(); 

} 

Ria BANS MEBs AY te ae: 


para.addEventListener('click’, paraHandler, false); 


现在 如 果 我 们 再 单 击 段落 ， 就 会 看 到 弹出 窗 只 有 一 个 了 ， 因 为 该 事 
件 不 会 再 被 上 传 给 body、document 和 window 了 。 

要 提醒 的 是 ， 如 果 我 们 要 移 除 茶 个 监听 右 ， 束 必 须 获 得 之 前 那 一 个 
指定 为 监听 器 函数 的 指针 。 人 和 否则， 即便 它们 的 函数 体 完全 相同 也 无 济 于 
事 ， 因 为 它们 两 者 不 是 同一 个 函数 。 

document.body.removeEventListener('click', 

function(){ 
alert(‘clicked body’); 
J; 
false); // does NOT remove the handler 











在 浏览 器 模型 中 ， 有 些 事件 自身 就 存在 一 些 预定 义 行为 。 例 如 ， 单 
击 链接 会 载 入 另 一 -1 对 此 ， 我 们 可 以 为 该 链接 设置 监听 器 ， 并 使 
用 preventDefault() 方 法 禁用 其 默认 行为 。 

下 面 ， ee。 让 他 们 在 每 次 单 击 链接 之 后 ， 
回答 一 个 问题 : “Are you sure you want to follow this link?”。 每 当 他 们 单 
击 的 是 Cancel( 即 confirm() 返 回 false 〉 时 ，preventDefault() 方 法 就 会 被 调 
用 : 

// all links 


var all_links = document.getElementsByTagName(‘a’); 








for (var i = 0; i < all_links.length; i++) { // loop all links 
all_links[i].addEventListener( 
‘click’, // event type 
function(e){ // handler 


if (!confirm(‘Are you sure you want to follow this link?’)){ 


e.preventDefault(); 
} 
hs 
false // don't use capturing 
); 
} 
需要 提醒 的 是 ， 并 不 是 所 有 事件 的 默认 行为 都 是 可 禁止 的 。 尺 管 大 
部 分 事件 是 可 以 的 ， 但 如 果真 的 有 必要 确定 一 下 ， 我 们 可 以 去 检测 事件 
对 象 的 cancellable 属 性 。 





7.5.7 路 浏览 器 的 事件 监听 器 





正如 我 们 所 说 过 的 ， 现 在 绝 大 部 分 的 浏览 右 都 已 经 完全 实现 了 
DOM Level 1 标准 。 然 而 ， 事 件 方面 的 标准 化 是 到 DOM Level 2 才 完 成 
的 。 这 就 导致 了 IE9 以 前 的 版 本 与 其 他 现代 浏览 器 在 这 方面 的 实现 有 大 
不 少 的 差异 。 

让 我 们 再 引入 一 个 事件 示例 ， 该 示例 将 会 在 控制 台中 返回 被 单 击 元 
A OHEA) 的 nodeName 属 性 值 : 

document.addEventListener('click', function(e){ 

console.log(e.target.nodeName); 

}, false); 

接 下 来 ， 我 们 仔细 看 看 下 的 实现 究竟 有 哪些 不 同 之 处 。 

IE 中 没有 addEventListener() 方 法 ， 但 它们 从 IES 开始 惑 提 供 了 一 个 
叫做 attachEventO 的 等 效 方法 。 对 于 更 早期 的 版 本 ， 我 们 就 只 能 通过 属 
性 方法 (例如 ondlick 属 性 ) 来 解决 问题 了 。 

对 于 单 击 事件 来 说 ， 使 用 attachEvent() 就 等 同 于 ee 属性 。 

如 果 我 们 使 用 老式 手法 来 进行 事件 监听 《例如 ， 通 过 将 东 个 函数 赋 











值 给 onclick 属 性 ) ， 那 么 当 该 回调 函数 被 调用 时 ， 它 不 会 获得 相关 的 事 
件 参数 。 但 只 要 我 们 设置 了 事件 监听 器 ， 正 中 总 会 有 一 个 全 局 对 象 
window.evnet 会 指 问 该 事件 。 

EIE 的 事件 对 象 中 ， 没 有 用 于 反映 触发 事件 目标 元 系 的 target 属 
性 ， 但 我 们 可 以 使 用 它 的 等 效 属性 srcElement。 

正如 之 前 所 提 到 的 ， 正 ”不 文 持 事件 捕捉 法 ， 而 只 使 用 冒 泡 法 来 运 
人 

IE 中 没有 stopPropagation() 方 法 ， 我 们 可 以 通过 将 下 -only 属 性 
cancelBubble 设 置 为 true 来 完成 相同 的 操作 。 

IE 中 没有 ”preventDefault() 方 法 ， 我 们 可 以 通过 将 IE-only 属性 
returnValue 设 置 为 false 来 完成 相同 的 操作 。 

对 于 事件 的 取消 监听 操作 ， 正 中 使 用 的 不 是 removeEventListener() 
方法 ， 我 们 要 调用 的 是 detachEvent(0) 方 法 。 

这 样 一 来 ， 我 们 就 将 原型 的 代码 修改 成 跨 浏 览 器 版 本 了 : 


function callback(evt) { 








// prep work 
evt = evt || window.event; 
var target = evt.target || evt.srcElement; 
// actual callback work 
console.log(target.nodeName); 
} 
// start listening for click events 
if (document.addEventListener){ // Modern browsers 
document.addEventListener(‘click’, callback, false); 
} else if (document.attachEvent){ // old IE 
document.attachEvent(‘onclick’, callback); 
} else { 


document.onclick = callback; //ancient 


} 


7.5.8 类 型 


现在 ， 我 们 已 经 7 了解 了 如 何 处 理 跨 浏览 器 事件 ， 但 至 今 为 止 所 有 的 
示例 都 是 关于 单 击 事件 的 。 那 么 ， 除 此 之 外 还 有 哪些 事件 呢 ? 您 可 能 
经 猜 到 了 ， 不 同 的 浏览 器 支持 的 事件 也 是 不 同 的 。 其 中 有 一 部 分 事件 是 
器 浏览 占 的 ， 而 男 一 部 分 则 是 这 些 浏览 器 独 有 的 。 关 于 完整 的 事件 列 
表 ， 您 可 能 需要 去 查看 相关 浏览 圳 的 文档 。 在 这 里 ， 我 们 只 讨论 路 浏览 
ar PF ANY ell o 
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鼠标 键 的 松 开 、 按 下 、 单 击 《〈 按 下 并 松 开 一 次 算 单 击 一 次 ) 、 双 
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BVP eee GE RET TES o RR LI) 、 移 出 〈 指 鼠标 从 某 元 
REJAH) 、 拖 动 。 
键盘 类 事件 。 
键盘 键 的 按 下 、 输 入 、 松 开 《〈 这 三 个 事件 是 按 顺 序 排 列 的 ) 。 
载 入 /窗口 类 事件 。 
载 入 《图 片 、 页 面 或 其 他 组 件 完成 载 入 操作 ) 、 凶 载 ( 指 用 户 离 
开 当 前 页 面 )、 弛 载 之 前 (由 脚本 提供 的 、 允 许 用 户 终 止 凶 载 的 选 
TH) . 
中 止 ( 指 用 户 在 下 中 停止 页 面 或 图 片 载 入 ) 、 错 误 ( 指 在 下 发 
Æ T JavaScript 错 误 或 图 片 载 入 失败 )〉。 
调整 大 小 〈( 指 浏览 器 窗口 大 小 被 重 置 ) 、 深 动 ( 指 页 面 进行 了 深 
动 操 作 ) 、 上 下 文 沫 单 〈 即 右键 菜单 出 现 )。 
表单 类 事件 。 


获得 焦点 〈 指 某 字 段 获 得 输入 ) 、 失 去 焦点 〈 指 离开 该 字段 ) 。 
改变 〈 指 改变 某 字 段 的 值 后 离开 ) 、 选 中 《〈 指 某 文 本 字段 中 的 文 
本 被 选中 ) 。 
重 置 《指控 除 用 户 输入 的 所 有 信息 ) 、 提 区 【〈 指 发 送 表 单 ) 。 
另外 ， 现 代 浏 览 器 还 提供 拖 动 事件 《例如 dragstart，dragend，drop 
等 ) 。 触 探 设备 也 会 有 touchstart，touchmove，touchend 事 件 等 。 
到 这 里 ， 有 关 事 件 的 内 容 算 讨 论 完了 。 请 读者 参考 本 章 最 后 的 练习 
题 ， 选 一 些 宣 有 挑战 性 的 题目 来 实际 体验 一 下 这 些 跨 浏 览 器 事件 的 处 理 
操作 。 








7.6 XMLHttpRequest% 象 


XMLHttpRequestO 是 一 个 用 构建 HITP 请 求 的 JavaScript 对 象 〈 构 造 
a) 。 从 历史 上 来 说 ，XMLHttpRequest〈 简 称 XHR ) 最 初 在 下 浏览 器 
中 是 以 ActiveX 对 象 的 形式 被 引入 的 。 但 正式 实现 该 对 象 则 是 始 于 IE7， 
那 时 候 也 只 是 该 浏览 器 中 的 一 个 本 地 对 象 ， 后 来 逐渐 被 其 他 浏览 器 所 接 
受 ， 并 形成 了 一 种 通用 的 器 浏览 器 实现 ， 这 就 是 所 谓 的 AJAX 应 用 。 这 
种 应 用 模式 可 以 使 我 们 无 须 每 次 都 通过 刷新 整个 页 面 来 获取 新 内 容 。 我 
们 可 以 利用 JavaScript 将 相关 的 HITP 请 求 发 送 给 服务 器 端 ， 然 后 根据 服 
务 器 问 的 啊 应 来 局 部 更 新 页 面 。 总 而 言 之 ， 通 过 这 种 方式 构建 出 来 的 页 
面 在 许多 响应 方式 上 会 更 类 似 于 果 面 应 用 。 

实际 上 ，AJAX 就 是 在 JavaScript 和 XML 之 间 所 建立 的 一 种 异步 联 
系 。 

之 所 以 是 异步 ， 是 因为 我 们 的 代码 在 发 送 HTTP 请 求 之 后 ， 不 需要 
特地 停 下 来 等 待 服务 器 响应 ， 可 以 继续 执行 其 他 任务 ， 待 相关 信息 到 达 
时 自然 会 收 到 通知 (通常 以 事件 的 形式 出 现 ) 。 

它 的 作用 很 明显 ，XHR 对 象 束 是 用 JavaScript 来 创建 




















JavaScript 
的 。 

至 于 用 XML， 则 是 因为 开发 者 最 初 设计 这 种 HTTP 请 求 束 是 用 来 获 
取 XML 文档， 并 用 其 中 的 数据 来 更 新 页 面 的 。 但 是 如 今 这 种 做 法 已 经 
不 太 常见 了 ， 这 种 方式 更 多 地 用 来 获取 纯 文 本 格式 的 数据 ，JSON 格 式 
的 数据 ， 或 只 是 一 段 等 待 被 插入 页 面 的 HITML 数 据 。 

关于 XMLHttpRequest 对 象 的 用 法 ， 主 要 可 以 分 为 两 个 有 效 步 又。 

发 送 请 求 一 一 在 这 一 步骤 中 ， 我 们 需要 完成 XMLHttpRequest 对 象 
的 构建 ， 并 为 其 设置 事件 监听 紫 。 
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达 时 收 到 通知 ， 然 后 相应 的 代码 就 会 被 执行 。 





7.6.1 IK ta Hk 


首先 ， 我 们 来 简单 地 创建 一 个 对 象 〈《 对 于 不 同 的 浏览 器 ， 可 能 在 细 
节 上 会 略 有 些 不 同 ) : 

var xhr = new XMLHttpRequest(); 

接 下 来 要 做 的 就 是 为 该 对 象 设置 一 个 能 触发 readystatechange 事 件 的 
事件 监听 器 : 

xhr.onreadystatechange = myCallback; 

然后 ， 我 们 需要 去 调用 其 open() 方 法 ， 有 具体 如 下 : 

xhr.open('GET’, 'somefile.txt’, true); 

如 您 所 见 ， 第 一 个 参数 指定 是 HTTP 请 求 的 类 型 〈 包 括 GET、 
POST、HEAD 等 ) 。GET 和 POST 是 其 中 最 常见 的 类 型 。 当 需要 发 送 的 
数据 不 是 很 多 ， 且 不 会 改写 服务 器 数据 时 ， 我 们 一 般 会 用 GET 类 型 ， 人 否 
则 就 会 使 用 POST 类 型 。 而 第 二 个 参数 则 是 我 们 所 请 求 目 标的 URL。 在 
这 个 示例 中 ， 我 们 所 请 求 的 是 一 个 与 当前 页 面 处 于 同一 目录 的 文本 文件 
somefile.txt。 最 后 一 个 参数 是 一 个 布尔 类 型 的 值 ， 它 决定 了 请 求 是 否 按 
照 异 步 的 方式 进行 : 是 就 为 ttue (大 多 数 情 况 下 都 为 此 选项 ) ， 否 则 就 
为 false《〈 此 选项 会 阻塞 JavaScript 执 行 ， 等 竺 直到 该 请 求 的 返回 数据 到 
Oe 

当然 了 ， 最 后 是 发 送 请 求 。 

xhr.send("); 

另外 只 要 我 们 愿意 ， 可 以 用 send() 方 法 在 发 送 请 求 时 附带 上 任何 数 
据 。 对 于 GET 类 请 求 来 说 ， 这 里 所 发 送 的 是 一 个 空 字符 串 。 因 为 数据 将 
被 包含 在 URL 中 。 而 对 于 POST 请 求 来 说 ， 它 是 表单 数据 中 的 一 个 查询 
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字符 串 key=value&key2=value2 。 
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将 注意 力 转向 其 他 任务 。 待 它 收 到 服务 器 端 啊 应 时 ， 会 自动 局 动 回调 函 
数 myCallback。 








7.6.2 处 理 啊 应 


我 们 已 经 为 readystatechange 事 件 设 置 了 监听 器 ， 那 么 这 个 事件 究竟 
是 怎么 回 事 呢 ? 原 来 ， 每 个 XHR 对 象 中 都 有 一 个 叫做 readyState 的 属 
仁 。 一 旦 我 们 改变 了 该 属性 的 值 ， 束 会 触发 readystatechange 事 件 。 该 属 
性 可 能 的 状态 值 如 下 : 

0 一 一 未 初始 化 状态 ; 

1 一 一 载 入 请 求 状态 ; 

2 一 一 载 入 完成 状态 ; 








d 
d 





3 一 一 请 求 交互 状态 ; 
4 一 一 请 求 完成 状态 。 





当 readyState 的 值 为 4 时 ， 束 意味 痢 服 务 器 端的 啊 应 信息 已 经 返回 ， 
可 以 开始 处 理 了 。 在 myCallback 函 数 中 ， 除 了 确定 readyState 的 值 是 4 之 
外 ， 我 们 还 必须 检查 一 下 HITP 请 求 的 状态 码 。 因 为 如 果 目 标 URL 实 际 
上 并 不 存在 ， 我 们 就 会 收 到 一 个 值 为 404 的 状态 码 〈 表 示 未 找到 文 
件 ) ， 正 常情 况 下 该 值 应 该 为 200。 因 此 ，myCallback 有 必要 对 该 值 进 
行 检 查 ， 该 状态 码 可 以 通过 XHR 对 象 的 status 属 性 来 获得 。 

一 旦 确定 了 xhr.readyState 的 值 为 4 并 且 xhr.status 的 值 为 200， 我 们 就 
可 以 通过 xhr.responseText 来 访问 目标 URL 中 的 内 容 了 。 下 面 ， 我 们 看 
看 如 何在 myCallback 中 实现 用 简单 的 alert() 方 法 来 显示 目标 URL 中 的 内 
容 : 

function myCallback() { 


if (xhr.readyState < 4) { 
return; // not ready yet 

} 

if (xhr.status !== 200) { 
alert('Error!'); // the HTTP status code is not OK 
return; 

} 

// all is fine, do the work 

alert(xhr.responseText); 

} 
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于 茶 些 计算 以 及 其 他 我 们 所 能 想到 的 地 方 。 

总 而 言 之 ， 这 两 个 处 理 步 骤 〈 发 送 请 求 、 处 理 啊 应 ) 是 整个 
XHR/AJAX 编 程 方式 的 核心 部 分 。 现 在 我 们 已 经 基本 掌握 了 ， 可 以 去 构 
建 下 一 个 Gmail 了 。 莪 ， 对 了 ， 我 们 还 得 介绍 一 些 浏览 器 之 间 的 细微 的 
不 一 致 之 处 。 


7.6.3 在 7 的 正 创建 XMLHttpRequestx 


在 早 于 版 本 7 的 Internet Explorer N wH, XMLHttpRequest 对 象 
是 以 ActiveX 对 象 的 形式 存在 的 ， 因 此 创建 XHR 实 例 的 方式 会 有 些小 小 
的 不 同 ， 具 体 如 下 : 

var xhr = new ActiveXObject(MSXML2.XMLHTTP.3.0'); 

HH, = MSXML2.XMLHTTP.3.0 是 我 们 所 要 创建 对 象 的 标识 符 。 
为 实际 上 ， XMLHttpRequest 对 象 有 儿 个 不 同 的 版 本 ， 如 果 访 问 我 们 网 
页 的 客户 没有 安装 最 新 的 版 本 ， 在 放弃 他 们 之 前 ， 或 许 您 应 该 试 试 前 两 
个 版 本 。 
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器 所 支持 的 XMLHttpRequest 对 象 进行 检查 ， 如 果 该 浏览 占 中 没有 这 个 
对 象 ， 我 们 就 得 使 用 下 方案。 因此 ， 整 个 创建 XHR 实 例 的 过 程 应 该 像 这 
FÉ: 
var ids = 
[MSXML2.XMLHTTP.3.0''MSXML2.XMLHTTP','Microsoft.XMLHTTP']; 
var xhr; 
if (XMLHttpRequest) { 
xhr = new XMLHttpRequest; 
} else { 
//TE:try to find an ActiveX object to use 
for (var i = 0; i < ids.length; i++) { 
try { 
xhr = new ActiveX Object(ids[i]); 
break; 
} catch (e){} 


} 
下 面 来 看 看 这 段 代码 完 竟 做 了 哪些 事 。 首 先 ， 数 组 ids 是 一 个 包含 


了 上 所 有 可 能 的 ActiveX 对 象 的 ID 列表 。 变 量 xhr 指 同 新 建 的 XHR 对 象 。 然 
后 ， 我 们 的 代码 会 先 测试 一 下 XMLHttpRequest 对象， 看 看 这 是 否 存 
在 。 如 果 是 ， 就 意味 着 当前 浏览 妖 文 持 XMLHttpRequest(0 构 造 器 的 (也 
就 是 说 ， 该 浏览 器 是 较为 现代 的 浏览 器 〉; 如 果 不 是 ， 那 么 代码 就 得 通 
过 遍历 ids 中 的 可 能 项 来 尝试 着 创建 对 象 。catch(e) 则 可 以 捕获 其 中 创建 
失败 的 项 目 并 使 循环 继续 。 如 此 ， 只 要 有 一 个 XHR 对 象 被 成 功 创建 ， 我 
们 就 可 以 提前 退出 循环 。 
正如 您 所 见 ， 这 上 段 代 码 有 点 长 ， 所 以 最 好 还 是 将 其 抽象 成 一 个 函 
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现在 ， 我 们 已 经 了 解 了 如 何 创建 一 个 XHR 对 象 ， 只 需 给 它 一 个 既定 
的 URL， 然 后 处 理 相 关 的 请 求 啊 应 即 可 。 但 如 果 我 们 异步 发 送 了 两 个 请 
求 会 发 生 什 么 昵 ?或 者 说 ， 如 有 果 第 二 个 请 求 的 响应 先 于 第 一 个 请 求 返 回 
会 发 生 什么 ? 

在 前 面 的 例子 中 ，XHR 对 象 都 是 属于 全 局 域 的 ，myCallback 要 根据 
这 个 全 局 对 象 的 存在 状态 来 访问 它 的 readyState、status 和 responseText 属 
性 。 除 此 之 外 还 有 一 种 方法 ， 可 以 让 我 们 摆脱 对 全 局 对 象 的 依赖 ， 那 残 
是 将 我 们 的 回调 函数 封装 到 一 个 财 包 中 去 。 下 面 我 们 来 看 看 具体 如 何 
做 : 

var xhr = new XMLHttpRequest(); 














xhr.onreadystatechange = (function(myxhr){ 
return function(){ 

myCallback(myxhr); 

}; 

})(xhr); 

xhr.open(‘GET’, 'somefile.txt'’, true); 

xhr.send("); 

在 这 种 情况 下 ，myCallback 将 会 以 参数 的 形式 接收 相关 的 XHR 对 
象 ， 这 就 避免 使 用 全 局 空间 的 问题 。 同 时 ， 这 也 意味 着 当 该 请 求 再 次 获 
得 响应 信息 时 ， 原 来 的 xhr 变 量 就 可 以 被 第 二 次 请 求 重 用 了 。 因 为 我 们 
在 闭 包 内 保留 了 该 对 象 的 原 有 信息 。 











7.6.5 X12 XML 


尽管 作为 数据 传输 格式 来 说 ， 最 近 JSON 〈 我 们 会 在 下 一 章 中 介 
绍 ) 在 风头 上 已 经 盖 过 了 XML， 但 XML 仍然 是 我 们 的 一 个 选择 。 除 了 
responseText 属 性 外 ，XHR 对 象 还 有 男 一 个 名 为 responseXML 的 属性 。 如 
果 我 们 向 一 个 XML 文档 发 送 一 个 HTTP 请 求 ， 该 属性 就 会 指向 该 XML 的 
DOM document 对 象 。 因 此 ， 对 于 该 文档 的 操作 ， 我 们 可 以 对 它 调 用 之 
前 所 讨论 的 core DOM 方 法 ， 例 如 getElementsByTagName()、 
getElementById() 等 。 





7.6.6 实例 示范 


下 面 ， 让 我 们 通过 一 个 具体 的 实例 来 总 结 一 下 关于 XHR 对 象 的 各 种 
话题 。 您 也 可 以 在 http://www.phpied.com/files/jsoop/xhr.html 中 找到 相关 
页 面 ， 并 测试 该 示例 中 的 操作 。 

该 主页 zhr.html 是 一 个 非常 简单 的 静态 页 面 ， 其 中 只 含有 三 个 <div> 
TUR: 

<div id="text">Text will be here</div> 

<div id="html">HTML will be here</div> 

<div id="xml">XML will be here</div> 
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它们 各 目的 内 容 载 入 相关 的 <div> 中 。 

这 三 个 文件 所 载 入 的 分 别 是 。 

一 段 简单 的 文本 ， 内 容 为 "Iam a text file”. 
content.htm] 一 一 一 段 H8TML 代 码 ， 具 体 如 下 : 

"I am <strong>formatted</strong> <em>HTML</em>" 
content.xml 一 一 一 个 XML 文档 ， 内 容 如 下 : 








content.txt 


<?xml version="1.0" ?> 

<root> 

I'm XML data. 

</root> 

要 注意 的 是 ， 上 面 所 提 到 的 所 有 文件 都 与 xhr.html 存 在 同一 个 目录 
中 。 
出 于 安全 因素 ， 我 们 只 能 对 同一 个 域 使 用 XMLHttp-Request 请 求 文 
件 。 然 而 ， 现 代 浏览 器 也 支持 XHR2， 它 支持 跨 域 请 求 ， 前 提 是 HTTP 请 
求 有 合适 的 Access- Control-Allow-Origin 尖 信息 。 

我 们 先 来 提取 请 求 / 啊 应 部 分 的 功能 ， 创 建 函 数 如 下 : 


function request(url, callback) { 





var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = (function (myxhr) { 
return function () { 
if (myxhr.readyState === 4 && myxhr.status === 200) { 
callback(myxhr); 
} 
i 
}(xhr)); 
xhr.open('GET’, url, true); 
xhr.send("); 

} 

该 函数 接受 两 个 参数 ， 一 个 是 我 们 所 请 求 的 URL， 男 一 个 则 是 啊 应 
返回 后 所 要 调用 的 回调 函数 。 接 下 来 ， 我 们 要 调用 三 次 该 函数 ， 每 个 文 
件 一 次 ， 具 体 如 下 : 

request( 


‘http://www. phpied.com/files/jsoop/content.txt’, 


function(o){ 
document.getElementByld(‘text').innerHTML = 


o.responseText; 


); 
request( 
‘http://www.phpied.com/files/jsoop/content.html’, 
function(o){ 
document.getElementByld(‘html’).innerHTML = 


o.responseText; 


); 
request( 
‘http://www. phpied.com/files/jsoop/content.xml', 
function(o){ 
document. getElementByld(‘xml').innerHTML = 
o.responseXML 
.getElementsByTagName(‘root')[0] 
firstChild 


.nodeValue; 


); 

在 这 里 ， 回 调 函 数 都 是 以 内 联 的 方式 来 定义 的 。 前 两 个 函数 的 实现 
很 类 似 ， 它 们 都 只 需要 用 其 所 请 求 文 件 中 的 内 容 蔡 换 挥 相关 <div> 中 的 
HTML 文 本 即 可 。 第 三 个 函数 则 略 有 不 同 ， 因 为 它 涉及 一 个 XML 文档 。 
首先 ， 我 们 需要 通过 o.responseXML 调 用 来 访问 该 XML 文档 的 DOM 对 
象 。 然 后 再 调用 getElementsByTagName() 获 取 页 面 中 所 有 <root> 标 签 的 


列表 〈 实 际 上 只 有 一 项 ) ，<root> 标 签 的 firstChild 是 一 个 文本 节点 ， 所 
以 我 们 用 其 nodeValue 属性 来 获取 这 段 文本 〈 即 “Im XML data”) ， 并 用 
它 替 换 掉 <div id="xml"> 中 的 HTML 内 容 。 整 体 效果 如 图 7-14 所 示 : 








I am a text file 


I am formatted HTML 


I'm XML data. 


图 7-14 
对 于 XML 文档 上 的 操作 ， 我 们 也 可 以 通过 调用 
o.responseXML.documentElement 来 获取 <root> 元 素 ， 以 取代 
o.responseXML.getElementsByTagName(root)[0]。 记 住 ， 
documentElement 所 指 回 的 就 是 一 个 XML 文档 的 根 和 节点。 特别 对 于 
HTMEL 文 档 来 说 ， 它 的 根 节 点 始终 都 是 <html> 标 签 。 


NES US 


本 章 所 涉及 的 内 容 相当 多 。 首 先 ， 我 们 介绍 了 一 系列 跨 浏 览 器 的 
BOM (浏览 器 对 象 模型 ) 对 象 ， 其 中 主要 包括 : 
全 局 对 象 window 的 系列 属性 ， 例 如 navigator, location, history, 
frames, screen“; 
及 其 方法 ， 例 如 setInterval0 和 setTimeout(); alert(). confirmQ 
prompt(); moveTo/By()#llresizeTo/By(). 
然后 ， 我 们 介绍 了 有 关 DOM (文件 对 象 模型 ) 的 内 容 ， 这 是 一 个 
以 树 型 结构 来 表示 HTML (或 XML) 文档 的 方法 ， 其 中 的 每 一 个 标签 或 
文本 都 是 该 树 结 构 上 的 节点 。 我 们 详细 介绍 了 以 下 几 点 。 
点 访问 。 
iitparentNode. childNodes. firstChild. lastChild. 
nextSibling、PpreviousSibling 这 些 珊 有 父 / 子 关 联 性 的 属性 来 访问 。 
iit getElementsByld(). getElementsByTagName(). getElements 
ByName() 及 querySelectorAll() 等 方法 来 访问 。 
节点 修改 。 
通过 innerHTML 或 innerText/textContent 属性 来 进行 
通过 nodeValue 或 setAttribute(0 以 及 对 象 属性 中 的 相关 属性 来 进 


nee eee 除 节点 。 
以 及 通过 appendChild()、cloneNode()、insertBefore() 等 方法 来 添 
加 新 节点 。 
另外 ， 我 们 还 介绍 了 一 些 从 DOM 0( 这 是 正式 标准 化 之 前 的 产物 ) 
中 移植 到 DOM Level 1 中 的 属性 ， 其 中 包括 以 下 几 部 分 


一 系列 集合 对 象 。 例 如 document 对 象 的 forms, images, links, 
anchors 以 及 applets。 但 相对 来 说 ，DOM 1 中 的 
getElementsByTagName() 显 然 更 为 灵活 实用 。 

document.body， 这 是 一 种 能 方便 访问 <body> 元 素 的 特定 属性 。 

另外 ， 我 们 还 介绍 了 document 中 的 title, cookie, referrer. domain 
四 大 特殊 属性 。 

接着 ， 我 们 为 您 介绍 了 浏览 句 事 件 的 传播 方式 。 尽 管 它 们 要 实现 跨 
浏览 器 模式 并 不 容易 ， 但 也 是 完全 有 可 能 的 。 由 于 事件 是 以 冒 泡 形式 传 
播 的 ， 因 此 ， 我 们 可 以 将 监听 任务 设置 得 更 全 局 化 。 另 外 ， 我 们 还 介绍 
了 如 何 阻 断 事件 的 传播 路 径 ， 以 及 如 何 改变 其 默认 行为 。 

最 后 ， 我 们 还 学 习 了 有 关 XMLHttpRequest 对 象 的 知识 ， 该 对 象 也 
允许 我 们 构建 一 个 具有 即时 啊 应 能 力 的 web 页 面 ， 主 要 分 为 两 个 步骤 。 

首先 ， 辐 服务 器 发 送 HTTP 请 求 ， 以 获得 相关 数据 。 

然后 ， 处 理 服务 器 的 啊 应 信息 ， 并 更 新 页 面 中 的 相关 部 分 。 








在 本 章 之 前 ， 我 们 的 练习 题 都 是 可 以 在 各 自 章节 的 正文 中 找到 解决 
方案 的 。 但 这 一 次 ， 您 会 发 现 有 些 练习 题 需要 我 们 对 本 书 以 外 的 内 容 有 
更 多 的 了 解 〈 或 实践 经 验 ) 。 

1. BOM 

作为 BOM WARS Ki, BUTT WAS S HIT SRN. BAS 
性 的 、 对 用 户 非 常 不 友好 的 代码 ， 以 及 所 有 非常 Web 1.0 的 东西 。 例 如 
晃动 的 浏览 右 窗 口 。 请 试 着 令 浏 览 器 弹出 一 个 200 x 200 的 窗口 ， 然 后 
将 其 大 小 渐变 成 400 x 400， 接 着 将 窗口 上 下 左右 不 停 移动 ， 造 成 地 宕 
效果 。 为 了 实现 这 种 效果 ， 我 们 需要 move*0 函 数 ， 其 中 需要 一 次 或 多 
次 调用 setInterval()， 最 后 可 能 还 需要 setTimeout() 及 clearInterval() 来 令 其 
停止 操作 。 或 者 我 们 可 以 更 简单 一 些 ， 将 当前 日 期 时 间 通 过 
document.title 实 时 显示 在 浏览 器 的 标题 栏 中 ， 并 像 钟 表 一 样 每 秒 钟 更 新 
一 次 。 

2. DOM 

换 一 种 不 同 的 方式 来 实现 walkyDOMO 方 法 ， 以 回调 函数 参数 的 形式 
来 代 奉 console.logO 便 编码 。 

使 用 innerHTML 来 移 除 相 关内 容 确 实 很 方便 〈( 即 
document.body.innerHTML ="") ， 但 未 必 总 是 最 好 的 选择 。 如 果 在 其 中 
有 元 素 被 设置 了 事件 监听 器 ， 那 么 当 该 元 兹 被 移 除 时 ， 正 并 不 会 解除 该 
元 素 与 监听 器 之 间 的 关联 。 这 就 有 可 能 会 导致 浏览 器 中 内 存 泄漏 ， 因 为 
它们 所 引用 的 内 容 已 经 不 存在 了 。 因 此 ， 请 你 实现 一 个 通用 的 移 除 
DOM 节 点 的 函数 ， 它 会 在 移 除 节 点 的 同时 移 除 相关 的 事件 监听 器 。 你 
可 以 遍历 目标 节点 的 属性 ， 检 查 这 些 属性 值 是 否 属 于 函数 类 型 ， 如 果 是 
































(例如 最 常见 的 ondlick 属 性 ) ， 你 就 需要 在 该 元 素 节 点 被 删除 之 前 将 该 
属性 设置 为 null。 

创建 一 个 叫做 include() 的 函数 ， 该 函数 可 以 按 需 将 外 部 脚本 引入 当 
前 页 面 。 你 可 以 首先 动态 创建 一 个 新 的 <script> 标 签 ， 然 后 设置 其 src 属 
性 ， 再 将 它 插入 到 <head> 标 签 末 端 。 该 函数 应 通过 如 下 测试 : 

> include(‘somescript.js'); 

3. 事件 

创建 一 个 叫做 myevent 的 跨 浏 览 器 事件 工具 集 (或 对 象 集 ) ， 其 中 
应 该 包含 以 下 方法 。 

addListener(element, event_name, callback) 一 一 其 中 的 element 参 数 也 
可 以 是 一 个 元 素数 组 。 

removeListener(element, event_name, callback). 
对 于 下 的 早期 版 本 ， 我 们 可 以 通过 检查 
window.event 属 性 来 实现 。 

getTarget(event). 








getEvent(event) 


stopPropagation(event). 

preventDefault(event). 

其 用 例如 下 : 

function myCallback(e) { 
e = myevent.getEvent(e); 
alert(myevent.getTarget(e).href); 
myevent.stopPropagation(e); 
myevent.preventDefault(e); 

} 

myevent.addListener(document.links, 'click', myCallback); 

执行 这 段 示例 代码 应 该 会 使 该 文档 中 所 有 的 链接 失效 ， 只 不 过 

们 在 被 单 击 时 会 弹出 一 个 alert0 窗 口 ， 以 显示 其 href 属 性 。 


BIE “4S DR RE HEN <div>s0%, “Abn AxX=100 px, y=100 px。 然 
后 编写 代码 使 <div> 元 素 能 按照 以 下 按键 J〈 左 ) 、K CA) 、 
M CR) . 1 CED 或 对 应 方向 键 的 操作 方式 在 页 面 中 移动 。 并 且 ， 在 
编写 过 程 中 可 以 重用 您 刚刚 实现 的 事件 工具 集 。 

4. XMLHttpRequest 对 象 

创建 一 个 名 为 ajax 的 XHR 工 具 集 (或 对 象 集 ) ， 其 示例 用 法 如 下 : 

function myCallback(xhr) { 








alert(xhr.responseText); 


} 


ajax.request('somefile.txt', 'get', myCallback); 


ajax.request(‘script.php’, post, myCallback, 'first=John&last=Smith'); 
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到 目前 为 止 ， 我 们 已 经 掌握 了 JavaScript 的 面向 对 象 特性 ， 如 原型 和 
继承 ， 并 且 接 触 了 一 些 使 用 浏览 器 对 象 的 实例 。 接 下 来 ， 我 们 将 介绍 一 
些 JavaScript 中 的 常用 模式 及 其 使 用 方法 。 

首先 什么 是 模式 ? 简单 地 说 ， 模 式 就 是 专门 为 菜 些 和 常见 问题 开发 
的 、 优 秀 的 解决 方案 。 

通常 ， 当 我 们 面 对 一 个 新 的 编程 问题 时 ， 往 往 会 发 现 眼前 的 这 个 问 
题 与 我 们 之 前 解决 过 的 某 个 问题 有 很 多 相似 之 处 。 这 时 候 ， 您 或 许 就 可 
以 考虑 将 这 些 问 题 抽象 归 类 ， 以 寻求 一 个 通用 性 的 解决 方案 。 而 所 谓 模 
式 ， 实 际 上 就 是 一 系列 经 过 实践 证 明 的 、 针 对 某 类 问题 的 、 具 有 可 重用 
性 的 解决 方案 (或 者 是 寻求 解决 方案 的 方法 ) 。 

有 了 时候 ， 模 式 仅 仪 是 一 个 用 于 帮助 我 们 思考 的 想法 或 名 字 。 例 如 ， 
当 您 与 团队 中 其 他 开发 人 员 讨 论 某 类 问题 或 方案 时 ， 模 式 可 以 被 当做 一 
个 术语 来 使 用 ， 以 使 交流 变 得 更 容易 一 些 。 

而 有 时 候 我 们 所 面 对 的 问题 可 能 要 更 特殊 一 些 ， 以 至 于 可 能 根本 找 
ABIES. IR, Wa BAS, AEE EEA 
候 都 不 是 一 个 好 主意 。 因 为 在 这 种 情况 下 ， 往 往 不 使 用 模式 要 比 为 了 套 
用 某 个 现 有 模式 而 去 强行 改变 问题 本 映 要 好 得 多 。 

在 本 章 ， 我 们 将 讨论 的 模式 主要 分 为 两 大 类 : 

编程 模式 (coding pattern) 一 些 专门 为 JavaScript 语言 开发 出 的 
最 佳 实践 方案 ; 

设计 模式 (design pattern) 
































这 些 模 式 与 具体 语言 无 天 ， 它 们 主 





要 来 自 那 本 著名 的 GoF 所 著 的 《设计 模式 》 卫 一 书 。 


8.1 编程 模式 


在 本 章 的 第 一 部 分 中 ， 我 们 首先 要 讨论 一 些 与 JavaScript 语言 特性 
密切 相关 的 模式 。 其 中 有 些 模 式 主要 用 来 组 织 代 码 〈 如 命名 空间 模 
式 ) ， 有 些 则 与 性 能 改善 有 关 《〈 如 延迟 定义 和 初始 化 时 分 文 ) ， 还 有 些 
会 涉及 一 些 JavaScript 语言 缺失 的 特性 〈 比 如 私有 属性 ) 。 总 而 言 之 ， 
本 节 将 讨论 以 下 几 种 模式 : 

行为 隔离 ; 

命名 空间 ; 

初始 化 分 文 ; 

延迟 初始 《惰性 初始 ) ; 

配置 对 象 ; 

私有 变量 和 方法 ; 

特权 方法 ; 

私有 函数 的 公有 化 ; 

即时 函数 ; 

链 式 调用 ; 

JSON. 








正如 我 们 所 知 ， 一 个 网 页 通常 有 三 
内 容 (HTML) ; 

外 观 CCSS) ; 

行为 (JavaScript) 。 


> 
P 
ai 


8.1.1.1 AF 

HTML 所 代表 的 是 网 页 的 内 容 ， 也 就 是 文字 。 理 想 状 况 下 ， 内 容 的 
HTML 标签 应 该 尽量 精简 ， 而 叉 能 恰到好处 地 组 织 内 容 的 语义 。 例 如 
<uU> 和 <li> 标 签 可 用 于 导航 菜单 ， 因 为 后 者 只 是 一 组 链接 而 已 。 

通常 情况 下 ， 内 容 HTML) 中 是 不 应 该 包含 格式 化 元 素 的 。 可 视 
化 格式 之 类 的 元 素 应 该 属于 外 观 层 的 东西 ， 通 弟 交 由 CSS 来 实现 ， 这 意 
味 着 我 们 应 该 : 

尽量 避免 在 HTML 标 签 中 使 用 style 属性 ; 

不 要 使 用 与 外 观 有 关 的 HIML 标 签 ， 例 如 <font>; 

尽量 根据 语义 需要 来 选择 标签 ， 而 不 是 去 考虑 浏览 器 会 如 何 绘制 它 
们 。 例 如 ， 开 发 人 员 有 时 候 对 <div> 标 签 的 使 用 实际 上 不 如 <p> 标 签 来 得 
更 合适 。 同 理 ， 我 们 应 该 更 多 地 使 用 <strong> 和 <em> 而 不 是 <b> 和 <i>， 
因为 后 者 更 强调 的 是 外 观 而 不 是 语义 。 

8.1.1.2 外 观 

要 将 外 观 与 内 容 分 开 ， 有 一 种 好 方法 就 是 对 浏览 器 默认 的 绘制 行为 
进行 重 置 ， 例 如 YUI 库 中 的 reset.css。 这 样 一 来 ， 浏 览 器 默认 的 绘制 方式 
就 不 会 影响 我 们 对 语义 标签 的 选择 了 。 

8.1.1.3 行为 

网 页 中 的 第 三 要 素 是 行为 。 行 为 也 应 该 做 到 与 内 容 及 外 观 分 离 。 行 
为 通常 是 由 JavaScript 负 责 定义 的 ， 且 只 由 <script> 标 俭 来 标记 。 这 些 脚 
本 代码 最 好 被 存放 在 外 部 文件 中 。 这 意味 着 我 们 使 用 的 不 是 类 似 于 
onclick, onmouseover 这 样 的 内 髋 属性 ， 而 是 利用 前 几 章 中 曾经 介绍 过 的 
addEventListenevattachEvent 方 法 来 进行 事件 定义 。 

关于 行为 与 内 容 的 隔离 ， 我 们 通常 有 以 下 几 条 原则 性 策略 。 

尽 可 能 少 用 <script> 标 签 。 
尽量 不 要 使 用 内 骸 事 件 的 处 理 方法 。 
尽量 不 要 使 用 CSS 表 达 式 。 





























“JavaScript 被 用 户 禁 用 时 ， 我 们 要 动态 地 添加 一 些 表示 无 目标 的 
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在 内 容 末尾 、<body> 标 签 之 前 ， 插 入 一 个 external,js 文件 。 

8.1.1.4 行为 隔离 实例 

下 面 ， 假 设 我 们 有 一 个 搜索 表单 ， 该 表单 中 的 内 容 需 要 通过 
JavaScript 来 验证 。 在 这 里 ， 我 们 没有 在 form 标 签 内 使 用 任何 JavaScript 
代码 ， 而 只 是 在 <body> 标 签 结 束 之 前 插入 一 个 <script> 标 签 ， 并 令 其 指 
同一 个 外 部 脚本 文件 。 

<body> 

<form id="myform" method="post" action="server.php"> 





<fieldset> 
<legend>Search</legend> 
<input 
name="search" 
id="search" 
type="text" 
/> 
<input type="submit" /> 
</fieldset> 
</form> 
<scriptsrc="behaviors.js"></script> 
</body> 
而 在 behaviors aaa i ， 我 们 为 submit 事 件 设 定 了 一 个 处 理 方法 ， 
用 以 检查 输入 文本 框 是 否 为 衬 。 奋 为 空 ， 则 不 提交 表格 。 这 样 的 设计 会 
市 省 一 次 客户 站 与 服务 端 之 间 的 通信 ， 应 用 也 会 根据 输入 马上 做 出 啊 


应 。 
以 下 是 _ behaviors.js 的 完整 实现 ， 在 其 中 ， 我 们 用 到 了 前 一 章 练习 





题 中 所 实现 的 myevent 工 具 : 
// init 
myevent.addListener('myform’, 'submit', function(e){ 
// no need to propagate further 
e = myevent.getEvent(e); 
myevent.stopPropagation(e); 
// validate 
var el = document.getElementBylId(‘search'); 
if (!el.value) { // too bad, field is empty 
myevent.preventDefault(e); // prevent the form submission 
alert(‘Please enter a search string’); 
} 
}); 
8.1.1.5 异步 的 JavaScript 代码 载 入 
在 这 个 例子 中 ， 我 们 注意 到 ，<script> 标 签 被 放置 在 <body> 元 素 的 
最 未 。 这 么 做 是 因为 载 入 JavaScript 代 码 的 过 程 会 阻塞 页 面 DOM 的 构 
建 ， 甚 至 在 某 些 浏览 磺 中 ， 一 些 需要 下 载 的 组 件 也 会 被 阻塞 。 将 
<Script> 移 动 到 页 面 底部 可 以 确保 它 不 会 形成 阻塞 ， 并 且 这 段 JavaScript 
被 载 入 后 只 会 增强 这 个 基本 功能 已 经 完整 的 页 面 。 
男 一 种 防止 外 部 JavaScript 文 件 阻 窟 页 面 的 方法 是 将 它们 异步 载 入 页 
面 。 这 么 做 的 话 ， 我 们 就 可 以 早 一 些 开 始 载 入 它们 。HTML5 为 此 提供 
了 defer 属 性 : 
<script defer src=”behaviors.js”></script> 
不 幸 的 是 ， 老 式 浏览 器 并 不 支持 defer 属 性 。 但 还 好 我 们 有 男 一 种 跨 
浏览 器 的 方法 来 解决 这 一 问题 ， 并 且 这 种 方式 新 老 浏览 器 都 能 接受 。 这 
种 方式 就 是 动态 创建 script 闻 点 ， 然 后 将 它 插入 DOM。 换 句 话说 ,我们 
需要 使 用 一 些 内 联 JavaScript 代码 来 载 入 外 部 JavaScript 文 件 。 这 段 代 码 











可 以 放 在 文档 的 顶部， 这 样 一 来 外 部 JavaScript 文 件 就 会 早 一 些 被 载 入 : 


<head> 
(function () { 
var s = document.createElement('script'); 
s.src = ‘behaviors.js'; 
document.getElementsByTagName('head')[01.appendChild(s); 


}0); 
</head> 


8.1.2 命名 空间 


为 了 减少 命名 冲突 ， 我 们 通常 都 会 尽量 减少 使 用 全 局 变量 的 机 会 。 
但 这 并 不 能 根本 解决 问题 ， 更 好 的 办 法 是 将 变量 和 方法 定义 在 不 同 的 命 
名 空间 中 。 这 种 方法 的 实质 就 是 只 定义 一 个 全 局 变量 ， 并 将 其 他 变量 和 
方法 定义 为 该 变量 的 属性 。 

8.1.2.1 将 对 象 用 做 命名 空间 

首先 ， 我 们 来 新 建 一 个 全 局 变量 MYAPP: 

// global namespace 

var MY APP = MYAPP || {}; 

然后 ， 我 们 为 MYAPP 设 置 属 性 event， 用 它 来 代替 上 一 章 练习 题 中 
实现 的 myevent 全 局 工具 对 象 : 

// sub-object 

MYAPP.event = {}: 

为 其 添加 方法 : 


// object together with the method declarations 











MY APP.event = { 
addListener: function(el, type, fn) { 
// .. do the thing 
f 
removeListener: function(el, type, fn) { 
//... 
ie 
getEvent: function(e) { 
//... 
} 
// ... other methods or properties 
}; 
8.1.2.2 命名 空间 中 的 构造 器 应 用 
我 们 也 可 以 在 命名 空间 中 使 用 构造 器 函数 。 在 本 例 中 ，DOM 工具 
本 身 就 定义 了 一 个 Element 构 造 妖 ， 通 过 它 我 们 可 以 很 方便 地 创建 DOM 
TUR 
MYAPP.dom = {}; 
MYAPP.dom.Element = function (type, properties) { 
var tmp = document.createElement(type); 
for (var i in properties) { 
if (properties.hasOwnProperty(i)) { 
tmp.setAttribute(i, properties[i]); 


} 
return tmp; 
E 
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MYAPP.dom.Text = function(txt){ 
return document.createTextNode(txt); 
}; 
然后 使 用 该 构造 器 在 网 页 底部 创建 一 个 链接 : 
var link = new MYAPP.dom.Element(‘a’, 
{href: 'http://phpied.com’, target: '_blank'}); 
var text = new MYAPP.dom.Text(‘click me’); 
link.appendChild(text); 
document.body.appendChild(link); 
8.1.2.3 namespace() 方 法 
我 们 可 以 实现 一 个 名 为 namespace 的 工具 方法 ， 来 简化 我 们 的 工 
其 调用 方法 很 简单 : 
MYAPP.namespace('dom.style’); 
这 等 价 于 : 
MYAPP.dom = {}; 
MYAPP.dom.style = {}; 
下 面 ， 我 们 来 看 看 这 个 namespace0 方 法 是 如 何 实现 的 。 首 先 ， 我 们 


创建 一 个 数组 ， 用 于 存放 由 “.” 分 割 的 输入 字符 串 ， 然 后 将 该 数组 中 的 
个 元 素 都 添加 为 全 局 对 象 的 属性 。 


var MY APP = {}; 
MYAPP.namespace = function (name) { 
var parts = name.split(’.’); 
var current = MY APP; 
for (var i = 0; i < parts.length; i++) { 
if (!current[parts[i]]) { 
current[parts[i]] = {}; 


current = current[parts[i]]; 
} 
}; 
测试 一 下 新 的 方法 : 
MYAPP.namespace('event'); 
MYAPP.namespace('dom.style’); 
上 述 代码 等 价 于 以 下 调用 : 
var MY APP = { 
event: {}, 
dom: { 
style: {} 
} 


8.1.3 初始 化 分 文 


我 们 在 上 一 章 兽 经 提 到 过 ， 不 同 的 浏览 器 对 于 相同 或 相似 的 方法 可 
能 有 不 同 的 实现 。 这 时 ， 您 需要 依据 当前 的 浏览 器 的 文 持 方 式 来 选择 对 
应 的 执行 分 文 。 这 类 分 文 可 能 有 很 多 ， 因 而 可 能 会 减 组 脚本 执行 速度 。 

但 非 要 等 到 运行 时 才能 分 文 吗 ? 我 们 完全 可 以 在 加 载 脚本 时 ， 在 模 
块 初始 化 的 过 程 中 融 将 部 分 代码 进行 分 文 处 理 。 这 显然 更 有 利于 提高 效 
率 。 利 用 JavaScript 代码 可 以 动态 定义 的 特性 ， 我 们 可 以 为 不 同 的 浏览 
器 定制 不 同 的 实现 方法 。 下 面 我 们 来 看 一 个 具体 示例 。 

首先 ， 我 们 定义 一 个 命名 空间 并 声明 了 一 些 事件 处 理 方法 。 

var MYAPP = {}; 

MYAPP.event = { 


addListener: null, 








removeListener: null 
}; 
注意 ， 此 时 无 论 是 添加 还 是 删除 事件 监听 的 方法 都 还 没有 被 定义 ， 
它们 将 根据 具体 的 浏览 器 特性 探测 的 结果 ， 被 赋予 不 同 的 实现 。 
if (window.addEventListener) { 
MYAPP.event.addListener = function(el, type, fn) { 
el.addEventListener(type, fn, false); 
ie 
MYAPP.event.removeListener = function(el, type, fn) { 
el.removeEventListener(type, fn, false); 
}; 
} else if (document.attachEvent){ // IE 
MYAPP.event.addListener = function(el, type, fn) { 
el.attachEvent(‘on' + type, fn); 
}; 
MYAPP.event.removeListener = function(el, type, fn) { 
el.detachEvent(‘on' + type, fn); 
ie 
} else { // older browsers 
MYAPP.event.addListener = function(el, type, fn) { 
el['on' + type] = fn; 
ie 
MYAPP.event.removeListener = function(el, type, fn) { 
el['on' + type] = null; 
ie 
} 
一 旦 上 述 脚 本 被 执行 ， 我 们 就 定义 了 与 浏览 器 特 性 相关 的 


addListener() 和 removeListener() 方 法 。 如 此 ， 当 它们 再 次 被 调用 时 ， 就 
不 需要 再 探测 浏览 器 特性 了 ， 脚 本 会 执行 得 更 快 。 

要 提醒 的 是 ， 在 检查 浏览 器 特性 时 ， 请 尽量 不 要 对 一 个 特性 做 过 多 
的 假设 。 在 上 例 中 ， 我 们 就 没有 遵从 这 一 原则 。 因 为 我 们 只 检查 了 浏览 
器 对 addEventListener 方法 的 文 持 ， 然 后 就 直接 定义 了 相应 的 
addListener() 和 removeListener() 方 法 。 在 这 个 例子 中 ， 我 们 合理 地 假设 
一 个 浏览 器 如 果实 现 了 addEventListener()， 那 么 它 当 然 也 会 同时 实现 
removeEventListener() 方 法 。 但 请 想象 一 下 ， 如 果 浏 览 器 只 实现 了 
stopPropagation()， 却 没有 实现 preventDefault() 方 法 ， 而 我 们 又 没有 对 它 
们 分 别 检测 ， 会 导致 什么 后 果 ? 男 一 方面 ， 我 们 很 可 能 在 发 现 
addEventListener() 方 法 没有 被 定义 后 ， 想 当然 地 认为 这 个 浏览 器 肯定 是 
低 版 本 的 正 ， 结 果 叉 导致 我 们 必须 为 IE 浏 览 器 编写 专用 的 处 理 函 数 。 请 
记 住 ， 这 些 代 码 可 能 会 在 目前 正中 正常 工作 ， 但 不 等 于 今后 的 版 本 也 一 
样 。 为 了 避免 自 定 义 函 数 在 新 版 本 浏览 器 可 能 会 增加 的 功能 ， 我 们 应 该 
单独 检测 每 个 可 能 会 用 到 的 浏览 右 特 性 ， 千 万 不 要 只 做 一 些 泛泛 的 假 


设 。 

















8.1.4 惰性 初始 


惰性 初始 模式 与 上 面 的 初始 化 分 文 模式 很 相似 。 不 同 之 处 在 于 ， 访 
模式 下 的 分 六 只 有 在 相关 函数 第 一 次 被 调用 时 才 会 发 生 一 即 只 有 函数 被 
调用 时 ， 它 才 会 以 最 佳 实现 改写 自己 。 在 初始 化 分 支 模式 中 ， 模 块 初始 
化 时 证 分 文 必然 会 发 生 ， 而 在 惰性 初始 模式 中 ， 这 可 能 根 本 吏 不 会 发 生 
因为 某 些 函数 可 能 永远 不 会 被 调用 。 同 时 ， 人 惰性 初始 模式 也 会 使 得 
初始 化 过 程 更 为 轻 量 ， 因 为 不 需要 再 做 分 文 检测 。 

接 下 来 ， 我 们 通过 一 个 addListener() 方 法 定义 来 演示 一 下 这 个 模 
式 。 该 方法 将 以 泛 型 的 方式 来 实现 一 一 即 在 它 第 一 次 被 调用 时 ， 首 先 会 




















检查 浏览 器 文 持 的 功能 ， 然 后 为 目 己 选择 最 合适 的 实现 ， 最 后 调用 目 身 





以 完成 真正 的 事件 添加 。 当 下 一 次 再 调用 该 方法 时 ， 就 会 直接 调用 它 选 
择 的 新 方法 而 不 再 需要 做 分 文 判断 。 作 为 例子 ， 实 现 如 下 : 


var MYAPP = 1{ 
MYAPP.myevent = { 
addListener: function(el, type, fn){ 
if (el.addEventListener) { 
MYAPP.myevent.addListener = function(el, type, fn) { 
el.addEventListener(type, fn, false); 
ie 
} else if (el.attachEvent) { 
MYAPP.myevent.addListener = function(el, type, fn) { 
el.attachEvent(‘on' + type, fn); 
E 
} else { 
MYAPP.myevent.addListener = function(el, type, fn) { 
el['on' + type] = fn; 
i 
} 
MYAPP.myevent.addListener(el, type, fn); 


8.1.5 配置 对 象 


模式 往往 适用 于 有 很 多 个 参数 的 函数 或 方法 。 但 关于 “很 多 ”的 理 
个 人 可 能 都 不 一 样 ， 但 一 般 来 说 ， 当 一 个 函数 的 参数 多 于 三 个 
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时 ， 使 用 起 来 就 多 少 会 有 些 不 太 方便 ， 因 为 我 们 不 太 容 易 记 住 这 些 参数 
的 顺序 ， 尤 其 是 当 其 中 还 有 默认 参数 存在 的 时 候 。 

但 我 们 可 以 用 对 象 来 代 符 多 个 参数 。 也 就 是 说 ， 让 这 些 参数 都 成 为 
某 一 个 对 象 的 属性 。 这 在 面 对 一 些 配置 型 参数 时 会 显得 尤为 适合 ， 因 为 
它们 中 往往 存在 多 个 缺 省 参数 。 简 而 言 之 ， 用 单个 对 象 来 蔡 代 多 个 参数 
有 以 下 几 点 优势 : 

不 用 考虑 参数 的 顺序 。 

可 以 跳 过 某 些 参数 的 设置 。 

函数 的 扩展 性 更 强 ， 可 以 适应 将 来 的 扩展 需要 。 

代码 的 可 读 性 更 好 ， 因 为 在 代码 中 我 们 看 到 的 是 配置 对 象 的 属性 名 
称 。 

下 面 ， 假 设 我 们 有 一 个 UI 组 件 的 构造 器 ， 通 过 调用 该 构造 匿 就 可 以 
创建 好 看 的 按钮 。 它 的 参数 包括 一 段 文本 ， 即 按钮 的 显示 内 容 〈<input> 
标签 的 value 属性 ) ， 和 一 个 可 缺 省 的 type 参 数 。 第 一 步 ， 我 们 先 从 一 
个 常规 的 按钮 开始 。 代 码 如 下 : 


// a constructor that creates buttons 








MYAPP.dom.FancyButton = function (text, type) { 
var b = document.createElement(‘input'); 
b.type = type || ‘submit’; 
b.value = text; 
return b; 

}; 

该 构造 器 很 简单 ， 只 需要 传递 给 它 一 个 字符 串 ， 然 后 就 可 以 把 新 创 

建 的 按钮 加 入 文档 : 

document.body.appendChild( 
new MYAPP.dom.FancyButton(‘puuush’) 


); 








到 目前 位 置 一 切 看 起 来 都 很 好 ， 但 接 下 来 ， 我 们 需要 为 按钮 设置 更 
多 属性 ， 例 如 颜色 和 字体 。 结 果 ， 这 个 构造 器 的 定义 最 终 就 可 能 会 变 成 
这 样 : 

MYAPP.dom.FancyButton = 

function(text, type, color, border, font) { 

ae 





这 显然 就 不 太 方 便 了 ， 比 如 当 我 们 可 能 只 想 设置 第 三 个 和 第 五 个 参 
数 ， 而 跳 过 第 二 个 和 第 四 个 时 ， 就 必须 这 样 : 

new MYAPP.dom.FancyButton( 

‘puuush’, null, 'white', null,'Arial'); 
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配置 ， 这 样 一 来 ， 函 数 定义 看 起 来 就 可 能 是 这 样 : 

MYAPP.dom.FancyButton = function(text, conf) { 
var type = conf.type || ‘submit’; 
var font = conf.font || "Verdana ; 
ie 


其 使 用 方法 如 下 : 
var config = { 
font: 'Arial, Verdana, sans-serif’, 
color: 'white' 
ie 
new MYAPP.dom.FancyButton(‘puuush’, config); 
Fi— PBF : 
document.body.appendChild( 
new MYAPP.dom.FancyButton(‘dude', {color: 'red'}) 


); 

如 您 所 见 ， 我 们 可 以 方便 地 设置 部 分 参数 ， 并 可 以 随意 改变 参数 设 
置 的 顺序 。 同 时 ， 由 于 我 们 是 通过 名 字 来 设置 参数 的 ， 因 此 代码 也 显得 
更 易 读 、 更 友好 。 

这 一 优点 同时 也 是 此 模式 的 一 大 缺点 ， 它 有 可 能 导致 对 此 模式 的 滥 
用 。 设 计 者 可 能 会 以 此 为 借口 ， 不 加 甄别 地 乱 添加 参数 ， 而 其 中 某 些 参 
数 不 完 全 是 默认 的 ， 某 些 又 依赖 于 其 他 参数 。 

作为 一 个 经 验 法 则 ， 这 些 参数 都 应 该 是 独立 且 可 选 的 。 如 果 在 函数 
中 ， 我 们 必须 为 这 些 参数 的 组 合 检查 各 种 可 能 性 CU, ABR 
了 ， 但 A 参数 只 有 在 B 参 数 被 设置 时 才 有 效 ”) ， 那 么 这 种 方法 就 可 能 * 
致 函 数 体 过 于 腑 肿 ， 难 以 维护 与 测试 ， 因 为 其 可 能 的 组 合 太 多 了 。 


8.1.6 私有 属性 和 方法 














在 JavaScript 中 ， 我 们 没有 可 以 用 于 设置 对 象 属性 访问 权限 的 修饰 
符 。 但 一 般 语 言 通常 有 以 下 访问 修饰 符 : 

















public 一 一 对 象 的 属性 (或 方法 ) 可 以 被 所 有 人 访问 。 
private 只 有 对 象 自己 可 以 访问 这 些 属性 。 
protected 一 一 仪 该 对 象 或 其 继承 者 才能 访问 这 些 属性 。 


尽管 JavaScript 中 没有 特殊 的 语法 来 标记 私有 属性 ， 但 是 根据 第 3 
Be: 函数 ， 我 们 可 以 在 构造 喜 中 通过 使 用 局 部 变量 和 函数 的 方式 来 实现 
类 似 的 权限 控制 。 

下 面 继续 以 FancyButton 构 造 器 为 例 ， 我 们 为 它 定 义 了 一 个 styles 局 
部 变量 ， 用 于 表示 有 所 有 的 默认 样式 参数 ， 并 且 还 定义 了 一 个 setStyles() 
的 局 部 方法 。 该 变量 和 方法 对 于 构造 器 之 外 的 代码 来 说 是 不 可 见 的 。 下 
面 ， 我 们 将 为 您 演示 FancyButton 对 象 是 如 何 使 用 这 些 局 部 的 私有 属性 
的 : 








var MYAPP = {}; 
MYAPP.dom = {}; 
MYAPP.dom.FancyButton = function(text, conf) { 
var Styles = { 
font: Verdana’, 
border: '1px solid black’, 
color: 'black', 
background: 'grey' 
ie 
function setStyles(b) { 
var i; 
for (i in styles) { 
if (styles.hasOwnProperty(i)) { 
b.style[i] = conf[i] || styles[i]; 


} 
conf = conf || {}; 
var b = document.createElement(‘input'); 
b.type = conf.type || ‘submit’; 
b.value = text; 
setStyles(b); 
return b; 
I 
在 这 段 代 码 中 ，styles 是 一 个 私有 属性 ， 而 setStylesO0 则 是 一 个 私有 
方法 。 构 造 器 可 以 在 内 部 调用 它们 《它们 也 可 以 访问 构造 器 中 的 任何 对 
象 ) ， 但 它们 却 不 能 被 外 部 代码 所 调用 。 


8.1.7 EAN PAR 


特权 函数 (这 个 概念 是 由 Douglas Crockford 提出 的 ) 实际 上 只 是 一 
些 普 通 的 公共 函数 ， 但 它们 却 可 以 访问 对 象 的 私有 方法 或 属性 。 其 作用 
就 像 一 座 桥梁 ， 将 私有 特性 以 一 种 可 控 的 方式 骏 露 给 外 部 使 用 者 。 


8.1.8 私有 函数 的 公有 化 


假设 我 们 定义 了 一 个 函数 ， 但 并 不 想 让 外 界 修改 它 ， 于 是 将 其 设 为 
私有 。 但 有 时 候 我 们 又 希望 让 某 些 外 部 代码 能 访问 到 它 ， 这 该 如 何 实现 
呢 ? 解决 方案 是 将 这 个 私有 函数 赋值 给 一 个 公有 属性 。 

下 面 ， 我 们 将 _setStyle0 和 _getStyle0 定 义 为 私有 方法 ， 但 同时 又 将 
它们 分 别 赋值 给 公有 方法 setStyle0 和 getStyle0): 

var MYAPP = 1{ 

MYAPP.dom = (function(){ 


var _setStyle = function(el, prop, value) { 





console.log(‘setStyle'); 
}; 
var _getStyle = function(el, prop) { 
console.log('getStyle'); 
}; 
return { 
setStyle: _setStyle, 
getStyle: _getStyle, 
yetAnother: _setStyle 
}; 
+0); 


在 这 种 情况 下 ， 当 MYAPP.dom.setStyle() 被 调用 时 ，_setStyle() 也 会 


被 调用 。 也 可 以 在 外 面 改 写 setStyles() 方 法 : 


MYAPP.dom.setStyle = function(){alert('b'); }; 

也 就 是 说 : 

MYAPP.dom.setStyle 指向 的 是 新 的 方法 ; 

MYAPP.dom.yetAnother 仍然 指向 _setStyle0); 

_setStyle() 方 法 随时 可 以 被 内 部 的 代码 调用 。 

当 我 们 骏 露 私有 方法 与 属性 时 ， 请 记 住 ， 对 象 《函数 及 数组 也 是 对 





象 ) 传递 的 方式 为 引用 传递 ， 所 以 对 象 可 以 从 外 部 被 修改 。 


8.1.9 即时 函数 


另 一 个 保证 全 局 命名 空间 不 被 污染 的 模式 是 ， 把 代码 封装 在 一 个 匿 








名 函数 中 并 立即 调用 。 如 此 一 来 ， 该 函数 中 的 所 有 变量 都 是 局 部 的 〈 假 
设 我 们 使 用 了 var 关 键 字 ) ， 并 在 函数 返回 时 被 销毁 《前 提 是 它们 不 属 
THA) 。 本 书 第 3 章 : 函数 已 经 详细 讨论 过 该 模式 。 


ZR» 








(function(){ 

// code goes here... 
70); 
该 模式 特别 适用 于 某 些 脚本 加 载 时 所 执行 的 一 次 性 初始 化 任务 。 
即时 函数 也 可 用 于 创建 和 返回 对 象 。 如 有 果 我 们 创建 对 象 的 过 程 很 复 
并 且 和 需要 做 一 些 初始 化 工作 ， 那 么 我 们 就 可 以 把 第 一 部 分 相关 的 初 


始 化 工作 设置 为 一 个 即时 函数 ， 然 后 通过 它 来 返回 一 个 对 象 一 一 它 可 以 
访问 初始 化 部 分 定义 的 任何 私有 属性 。 


var MYAPP = {}; 
MYAPP.dom = (function () { 


// initialization code... 


function _private() { 
le 
} 
return { 
getStyle: function (el, prop) { 
console.log(‘getStyle'); 
_private(); 
h 
setStyle: function (el, prop, value) { 
console.log('setStyle'); 


30); 
8.1.10 tet 


综合 上 述 几 个 模式 ， 我 们 可 以 获得 一 个 新 的 模式 ， 这 个 模式 通常 被 
称 为 模块 模式 。 在 编程 中 ， 模 块 的 概念 帮助 我 们 管理 代码 片段 与 库 ， 并 
且 在 需要 的 时 候 引 入 它们 ， 残 像 玩 拼 图 游戏 一 样 。 

扩展 阅读 

JavaScript 暂 时 还 没有 内 建 的 模块 机 制 。 不 过 ， 未 来 可 能 会 通过 
ee FP samedi 套 模块 声明 


规则 ， 它 通过 require() 函 数 和 exports 对 象 来 声明 与 调用 模块 。 具 体 请 参 
eae commonjs.org o 
模块 模式 包括 以 下 几 个 音 


命名 空间 : 用 于 减少 模块 之 间 的 命名 冲突 。 
即时 函数 : 用 于 提供 私有 作用 域 以 及 初始 化 操作 。 


私有 属性 与 方法 。 
作为 返回 值 的 对 象 : 该 对 象 作为 模块 提供 公共 API。 例 如 : 
namespace('MY APP.module.amazing’); 
MYAPP.module.amazing = (function () { 

// short names for dependencies 

var another = MYAPP.module.another; 

// local/private variables 

var i, j; 

// private functions 

function hidden() {} 

// public API 

return { 

hi: function () { 
return "hello"; 

} 
}; 
10); 
使 用 方式 : 
MYAPP.module.amazing.hi(); // "hello" 





通过 链 式 调用 模式 ， 我 们 可 以 在 单行 代码 中 一 次 性 调用 多 个 方法 ， 
就 好 像 它们 被 链接 在 了 一 起 。 当 我 们 需要 连续 调用 厦 干 个 彼此 相关 的 方 
法 时 ， 会 融 来 很 大 的 方便 。 实 际 上 ， 我 们 束 是 通过 前 一 个 方法 的 结 采 
〈《 即 返回 对 象 ) 来 调用 下 一 个 方法 的 ， 因 此 不 需要 中 间 变 量 。 
通常 情况 下 ， 任 何 一 个 新 建 的 构造 器 都 能 立即 作用 到 茶 个 DOM 元 








素 上 去 ， 例 如 在 接 下 来 的 代码 中 ， 我 们 用 构造 右 新 建 了 一 个 <span> 元 
素 ， 然 后 将 其 添加 到 <body> 元 素 中 : 
var obj = new MYAPP.dom.Element('span’); 
obj.setText(‘hello'); 
obj.setStyle(‘color’, 'red'); 
obj.setStyle(‘font', Verdana’); 
document.body.appendChild(obj); 
我 们 已 经 知道 ， 构 造 费 返回 的 是 新 建 对 象 的 this 指 针 。 同 样 的 ， 我 
们 也 可 以 让 setTextO0 和 setStyle0) 方 法 返回 this, KEE, RTM WAR 
用 这 些 方法 所 返回 的 实例 来 调用 其 他 方法 ， 这 就 是 所 谓 的 链 式 调用 : 
var obj = new MY APP.dom.Element('span’; 
obj.setText(‘hello') 
setStyle(‘color’, 'red') 
.setStyle(‘font', 'Verdana'); 
document.body.appendChild(obj); 
实际 上 ， 我 们 甚至 不 需要 定义 obj 变 量 ， 如 果 在 新 对 象 被 添加 到 
DOM 树 之 后 就 不 再 需要 访问 它 的 话 。 那 么 我 们 可 以 这 样 写 : 
document.body.appendChild( 
new MYAPP.dom.Element('span') 
setText(‘hello') 


.setStyle(‘color’, 'red') 





.setStyle(‘font', Verdana’) 
); 
此 模式 的 缺点 之 一 是 ， 由 于 所 有 的 调用 都 在 同一 行 ， 一 旦 调用 中 出 
错 ， 融 会 为 调试 市 来 一 点 困难 ， 因 为 一 般 报 错 只 会 告诉 我 们 在 第 几 行 ， 
而 我 们 无 法 从 中 得 知 错误 出 现在 链 式 调用 中 的 哪 一 环 。 


8.1.12 JSON 





在 编程 模式 这 一 节 末尾 ， 我 们 来 简单 介绍 一 下 JSON。 从 技术 上 
说 ，JSON 本 吴 不 能 算 编程 模式 ， 但 可 以 说 ，JSON 的 使 用 确实 是 一 种 很 
有 用 的 模式 。 

JSON 本 喘 实 际 上 是 一 种 轻 量 级 的 数据 交换 格式 。 当 使 用 
XMLHttpRequest() 接 收服 务 嚣 病 的 数据 时 ， 通 常 使 用 的 就 是 JSON 而 不 
是 XML。JSON 是 JavaScript Object Notation 的 缩写 ， 它 除了 使 用 极为 方 
便 之 外 ， 没 有 什么 特别 的 。JSON 格 式 由 对 象 和 数组 标记 的 数据 构成 。 

下 面 是 JSON 字 符 串 的 一 个 例子 ， 来 目 服 务 器 啊 应 的 XHR 请 求 : 

{ 

‘name’: 9toyan ， 
‘family’: 'Stefanov', 
‘books’: ['OOJS', 'JSPatterns', 'JS4PHP'| 


~ 


与 其 相对 应 的 XML 应 该 如 下 : 
<?xml version="1.1" encoding="iso-8859-1"?> 
<response> 
<name>Stoyan</name> 
<family>Stefanov</family> 
<books> 
<book>OOJS</book> 
<book>JSPatterns</book> 
<book>JS4PHP</book> 
</books> 


</response> 


首先 ， 我 们 可 以 看 到 JSON 是 多 么 轻 量 ， 它 只 用 了 很 少 的 字 市 来 表 


示 数 据 。 但 使 用 JSON 的 最 大 好 处 是 ，JavaScript 可 以 很 容易 地 人 处理 它 。 
假设 我 们 及 送 了 一 个 XHR 请 求 并 得 到 了 一 个 JSON 字 符 串 ， 它 保存 在 
XHR 的 responseText 属 性 中 ， 然 后 ， 我 们 调用 eval0 将 该 字符 串 转 换 为 
JavaScript 对 象 : 

// warning: counter-example 

var response = eval(( + xhr.responseText + ')'); 

接着 ， 我 们 就 可 以 通过 obj 的 属性 来 访问 这 些 数 据 了 : 

Console log(reponse.name); / "Stoyan" 

Console log (reponse.books[2]); / "JS4PHP" 

由 于 eval0 有 安全 隐患 问题 ， 所 以 最 好 使 用 JSON 对 象 来 处 理 ISON 
数据 《对 于 没有 JSON 对 象 的 老式 浏览 锋 ， 可 以 使 用 外 部 库 : 
http://json.org/) ， 这 样 做 也 很 方便 : 

var response = JSON.parse(xhr.responseText); 

正 因为 JSON 简洁 的 特点 ， 它 很 快 成 为 一 种 流行 的 、 与 语言 无 关 的 
数据 交换 格式 。 我 们 可 以 很 容易 地 在 服务 器 端 使 用 喜欢 的 语言 创建 
JSON 对 象 ， 例 如 ， 可 以 用 PHP 提供 的 json_encode() 方 法 将 PHP 数 组 序 
列 化 为 JSON 字 符 串 ， 再 用 json_decode(0) 方 法 还 原 PHP 数 组 。 

反问 将 对 象 转换 为 JSON 字 符 串 ， 采 用 

Stringify0 方 法 : 

var Str = JSON.stringify( {hello:"you"} ); 


8.2 设计 模式 


在 本 章 第 二 部 分 中 ， 我 们 将 为 您 介绍 如 何 使 用 ”JavaScript 来 演绎 
《设计 模式 : 可 复 用 面向 对 象 软件 的 基础 》 一 书 中 介绍 的 部 分 设计 模 
式 。 该 书 很 有 影响 力 ， 通 常 也 被 称 为 Book of Four， 或 者 Gang of Four 或 
GoF〔 代 表 该 书 的 四 位 作者 〉 。 这 本 书 中 所 涉及 的 模式 大 致 上 可 以 分 为 
3 组 。 

创建 型 模式 : 涉及 对 象 的 创建 与 初始 化 。 

结构 型 模式 : 描述 了 如 何 组 合 对 象 以 提供 新 的 功能 。 

行为 型 模式 : 描述 了 对 象 之 间 如 何 通信 。 

GoF 一 共 介 绍 了 23 个 模式 ， 自 此 书 发 行 以 来 ， 人 们 又 发 现 了 更 多 的 
模式 。 在 这 本 书 中 ， 我 们 只 介绍 其 中 的 四 个 ， 并 通过 一 些 具 体 JavaScript 
的 实例 加 以 说 明 。 请 记 住 ， 提 到 模式 ， 我 们 更 关注 的 是 它们 接口 及 关 
系 ， 而 不 是 内 部 的 实现 细节 。 一 旦 您 掌握 了 一 种 设计 模式 ， 实 现 起 来 很 
容易 ， 尤 其 对 于 JavaScript 这 样 的 动态 语言 来 说 。 

下 面 是 我 们 将 要 介绍 的 模式 : 

单 件 模 式 ; 

工厂 模式 ; 

装饰 器 模式 ; 

观察 者 模式 。 





8.2.1 È m1 


单 件 是 一 个 创建 型 的 设计 模式 ， 它 主要 考虑 的 是 创建 对 象 的 方式 。 
当 我 们 需要 创建 一 种 类 型 或 一 个 类 的 唯一 对 象 时 ， 就 可 以 使 用 该 模式 。 


在 一 般 的 语言 中 ， 这 意味 着 这 一 个 类 只 能 被 创建 一 个 实例 对 象 ， 如 果 之 
后 再 尝试 创建 该 对 象 的 话 ， 代 码 就 只 会 返回 原来 的 实例 。 

但 由 于 JavaScript 本 号 没有 类 的 概念 ， 所 以 单 件 成 为 了 默认 行为 ， 也 
是 最 自然 的 模式 。 每 个 对 象 都 是 一 个 单 件 。 

JavaScript 中 最 基本 的 单 件 模式 实现 是 使 用 对 象 文本 标识 法 : 

var single = {}; 


很 简单 ， 不 是 吗 ? 





8.2.2 È 黄 式 2 


但 当 我 们 想 用 类 似 于 类 的 语法 来 实现 单 件 模式 时 ， 事 情 就 会 变 得 更 
有 趣 一 些 。 例 如 ， 假 设 我 们 有 一 个 叫做 LoggerO 的 构造 器 ， 而 我 们 想 这 
ASFA: 


var my_log = new Logger(); 








my_log.log('some event’); 

// ... 1000 lines of code later in a different scope... 

var other_log = new Logger(); 

other_log.log(‘some new event’); 

console.log(other_log === my_log); // true 

这 段 代 人 码 所 要 表达 的 意思 是 ， 尺 管 这 里 多 次 使 用 了 new， 但 实际 上 
所 创建 的 对 象 实例 却 始终 只 有 一 个 ， 后 续 的 构造 器 调用 过 程 中 所 返回 的 
始终 是 同一 个 对 象 。 这 是 怎么 做 到 的 呢 ? 

8.2.2.1 全 局 变量 

解决 方案 之 一 是 用 全 局 变量 来 保存 这 个 唯一 的 实例 。 在 这 种 情况 
下 ， 我 们 的 构造 器 看 起 来 像 这 样 : 

function Logger() { 











global_log = this; 
} 
return global_log; 
} 
使 用 这 个 构造 器 将 达到 预期 的 结果 : 
var a = new Logger(); 
var b = new Logger(); 
console.log(a === b); // true 
但 这 样 做 的 缺陷 也 正 是 使 用 了 全 局 变量 ， 它 在 任何 时 候 都 有 可 能 被 
覆盖 挤 ， 从 而 导致 实例 丢失 。 反 之 亦 然 ， 全 局 变量 也 随时 有 可 能 窗 六 挥 
别 的 对 象 。 
8.2.2.2 构造 器 属性 
正如 我 们 所 知道 的 ， 函 数 也 是 一 种 对 象 ， 本 喘 也 有 属性 。 因 此 ， 我 
们 也 可 以 将 这 个 唯一 实例 设置 为 构造 费 本 号 的 属性 。 
function Logger() { 








if (ILogger.single_instance) { 
Logger.single_instance = this; 
} 
return Logger.single_instance; 
} 
在 这 种 情况 下 ， 当 我 们 调用 var a = new Logger0) 语 句 时 ，a 就 会 指向 
一 个 新 建 的 Logger.single_instance 属性 。 接 下 来 如 果 我 们 再 调用 var b = 
new Logger() 语 句 ， 得 到 的 b 将 会 指向 同一 个 Logger.single_instance 属 
性 。 这 正 是 我 们 想 要 的 结果 。 
上 述 方 法 很 显然 解决 了 全 局 变量 所 市 来 的 问题 ， 因 为 没有 全 局 变量 
被 创建 。 它 的 唯一 缺陷 是 Logger 构 造 器 的 属性 是 公有 的 ， 因 此 它 随时 有 
可 能 会 被 覆盖 ， 如 此 一 来 ， 这 个 唯一 实例 可 能 会 被 丢失 或 被 修改 。 上 述 


方法 很 显然 解决 了 全 局 命名 空间 所 市 来 的 问题 ， 因 为 我 们 没有 创建 全 局 
变量 。 它 唯一 的 缺陷 是 Logger 构 造 器 的 属性 是 公开 可 见 的 ， 因 此 随时 有 
被 履 盖 的 可 能 ， 如 此 一 来 ， 这 个 单 实例 就 有 可 能 会 被 丢失 或 被 修改 。 当 
然 ， 我 们 也 只 能 为 之 后 那些 搬 起 石头 打 自 己 的 脚 的 程序 员 保 护 到 这 一 步 
了 。 毕 竟 ， 如 果 有 人 可 以 对 该 单 实例 属性 动手 脚 ， 也 就 一 样 可 以 对 
Logger 的 构造 器 动手 脚 。 

8.2.2.3 使 用 私有 属性 

上 述 问题 的 解决 方案 是 使 用 私有 属性 。 我 们 已 经 知道 如 何 使 用 财 包 
来 保护 一 个 变量 ， 作 为 一 个 练习 ， 请 用 此 方法 实现 单 件 模式 。 


8.2.3 工厂 模式 








工厂 模式 也 属于 来 创建 对 象 的 创建 型 模式 。 当 我 们 有 多 个 相似 的 对 
象 而 又 不 知道 应 该 先 使 用 哪 种 时 ， 就 可 以 考虑 使 用 工厂 模式 。 在 该 模式 
下 ， 代 码 将 会 根据 具体 的 输入 或 其 他 既定 规则 ， 上 自行 决定 创建 哪 种 类 型 
的 对 象 。 

下 面 ， 假 设 我 们 有 三 个 不 同 的 构造 右 ， 它 们 所 实现 的 功能 是 相似 
的 。 它 们 所 创建 的 对 象 都 将 接受 一 个 URL 类 型 的 参数 ， 但 处 理 细 和 稍 有 
不 同 。 例 如 ， 它 们 分 别 创建 的 是 一 个 文本 DOM 闻 点、 一 个 链接 以 及 一 
个 图 像 。 

var MYAPP = {}; 

MYAPP.dom = {}; 

MYAPP.dom.Text = function (url) { 

this.url = url; 
this.insert = function (where) { 
var txt = document.createTextNode(this.url); 


where.appendChild(txt); 


ie 
} 
MYAPP.dom.Link = function (url) { 
this.url = url; 
this.insert = function (where) { 
var link = document.createElement(‘a’); 
link.href = this.url; 
link.appendChild(document.createTextNode(this.url)); 
where.appendChild(link); 
ie 
}; 
MYAPP.dom.Image = function (url) { 
this.url = url; 
this.insert = function (where) { 
var im = document.createElement(‘img'); 
im.src = this.url; 
where.appendChild(im); 
i 
}; 
使 用 三 个 构造 器 的 方法 都 一 样 : 设置 url 属 性 并 调用 insert() 方 法 。 
var url = 'http://www.phpied.com/images/covers/oojs.jpg'; 
var o = new MYAPP.dom.Image(url); 
o.insert(document.body); 
var o = new MYAPP.dom.Text(url); 
o.insert(document.body); 
var o = new MYAPP.dom.Link(url); 


o.insert(document.body); 





但 我 们 预先 并 不 知道 应 该 创建 哪 一 种 对 象 ， 例 如 ， 程 序 需要 根据 用 
户 所 按 的 按钮 来 决定 对 象 的 创建 。 假 设 type 中 包含 了 被 创建 对 象 的 类 
型 ， 我 们 可 以 用 if 或 者 switch 语 句 写 出 如 下 代码 : 


var 0; 





if (type === 'Image’) { 

o = new MYAPP.dom.Image(); 

} 

if (type === 'Link’) { 

o = new MYAPP.dom.Link(); 

} 

if (type === "Text') { 

o = new MYAPP.dom.Text(url); 

} 

o.url = ‘http://...' 

o.insert(); 

这 段 代码 可 以 工作 ， 但 如 果 构 造 器 很 多 ， 代 人 码 就 会 很 长 ， 难 以 维 
护 。 尤 其 当 我 们 是 在 写 一 个 库 或 框架 时 ， 就 有 可 能 根本 不 知道 构造 器 函 
数 的 名 字 。 这 时 候 ， 就 应 该 考虑 将 这 种 动态 创建 对 象 的 操作 委托 给 一 个 
工厂 函数 。 

下 面 ， 让 我 们 来 给 MYAPP.dom 工 具 添加 一 个 工厂 方法 : 

MYAPP.dom.factory = function(type, url) { 








return new MY APP.dom|[type](url); 
R 
PR Ja Be a AY E EDSS R T: 
var image = MYAPP.dom.factory("Image", url); 
image.insert(document.body); 


在 这 个 例子 中 ，factory(0) 方 法 是 很 简单 的 ， 但 在 实际 使 用 中 ， 我 们 





可 能 需要 对 该 函数 的 type 参数 值 进行 相关 的 验证 (例如 ， 检 查 
MYAPP.dom[type] 是 否 存在 ) ， 并 且 对 所 有 的 对 象 做 一 些 相同 的 设置 工 
作 ( 例 如 ， 设 置 折 有 构造 器 共用 的 URL)。 





He 


8.2.4 装饰 器 模式 








凌 饰 器 模式 是 一 种 结构 型 模式 ， 它 与 对 象 的 创建 无 关 ， 主 要 考虑 的 
征 如 何 拓展 对 象 的 功能 。 也 就 是 说 ， 除 了 使 用 线性 式 〈 父 一 子 一 孙 ) 继 
承 方式 之 外 ， 我 们 也 可 以 为 一 个 基础 对 象 创建 在 干 个 装饰 对 象 以 拓展 其 
功能 。 然 后 ， 由 我 们 的 程序 自行 选择 不 同 的 装饰 并 ， 并 按 不 同 的 顺序 使 
用 它们 。 在 不 同 的 程序 中 我 们 可 能 会 面临 不 同 的 需求 ， 并 从 同样 的 装饰 
髓 集合 中 选择 不 同 的 子 集 。 在 下 面 的 代码 中 ， 我 们 为 您 演示 了 装饰 器 模 
式 的 一 种 使 用 方法 ; 


var obj = { 











doSomething: function () { 
console.log(‘sure, asap'); 
} 
//... 
}; 
obj = obj.getDecorator('deco1'; 
obj = obj.getDecorator(‘deco13'); 
obj = obj.getDecorator(‘deco5'); 
obj.doSomething(); 
这 个 例子 的 开头 使 用 了 一 个 拥有 doSomething0) 方 法 的 简单 对 象 ， 接 
着 ， 我 们 通过 名 字 来 选择 不 同 的 装饰 器 。 这 里 的 每 一 个 装饰 器 都 有 一 个 
doSomething0 方 法 一 一 它 会 先 调 用 前 一 个 装饰 器 的 doSomething() 方 法 ， 
然后 再 执行 目 己 的 特有 代码 。 每 次 添加 一 个 装饰 器 时 ， 我 们 都 会 履 羡 基 


础 obj。 最 后 ， 选 择 完 所 有 装饰 器 后 ， 调 用 doSomething() 方 法 ， 它 即 会 
顺序 调用 每 个 装饰 器 的 doSomething() 方 法 。 下 面 ， 我 们 再 来 看 一 个 具体 
的 实例 。 
Bei — PRB VE BY 
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现 decorate() 方 法 。 
var tree = {}; 
tree.decorate = function() { 
alert(‘Make sure the tree won\'t fall’); 
}; 
接着 ， 再 定义 getDecorator() 方 法 ， 访 方法 用 于 添加 额外 的 装饰 器 。 
闭 饰 器 被 实现 为 构造 器 函数 ， 痢 继承 自 tree 对 象 。 
tree.getDecorator = function(deco){ 
tree[deco].prototype = this; 
return new tree[deco]; 
F 
下 面 来 创建 第 一 个 装饰 器 RedBalls()， 我 们 将 它 设 为 tree 的 一 个 属性 
(以 保持 全 局 命名 空间 的 纯净 ) 。RedBall 对 象 也 提供 了 decorate() 方 
法 ， 注 意 它 先 调用 了 父 类 的 decorate() 方 法 。 
tree.RedBalls = function() { 
this.decorate = function() { 
this.RedBalls.prototype.decorate(); 
alert('Put on some red balls’); 
}; 
}; 
然后 ， 我 们 用 同样 的 方法 来 分 别 添 加 BlueBalls0 和 Angel0 装 饰品 : 


tree.BlueBalls = function() { 


们 。 


this.decorate = function() { 
this. BlueBalls.prototype.decorate(); 
alert('‘Add blue balls’); 
ie 
}; 
tree.Angel = function() { 
this.decorate = function() { 
this. Angel.prototype.decorate(); 
alert('‘An angel on the top’); 
} 
F 
再 把 所 有 的 装饰 器 都 添加 到 基础 对 象 中 : 
tree = tree.getDecorator('BlueBalls'); 
tree = tree.getDecorator('Angel’); 
tree = tree.getDecorator('RedBalls'); 
最 后 ， 运 行 decorate() 方 法 : 
tree.decorate(); 
最 终 ， 当 我 们 执行 decorate() 方 法 时 ， 将 依次 得 到 如 下 警告 信息 : 
Make sure the tree won't fall 
Add blue balls 
An angel on the top 
Add some red balls 
由 此 可 见 ， 我 们 可 以 创建 很 多 装饰 医 ， 然 后 按照 需求 选择 和 组 合 它 


8.2.5 观察 者 模式 





观察 者 模式 〈 有 时 也 称 为 发 布 -订阅 模式 ) 是 一 种 行为 型 模式 ， 主 
要 用 于 处 理 不 同 对 象 之 间 的 交互 通信 问题 。 观 察 者 模式 中 通常 会 包含 两 
类 对 象 。 

一 个 或 多 个 发 布 者 对 象 ; 当 有 重要 的 事情 发 生 时 ， 会 通知 订阅 者 。 

一 个 或 多 个 订阅 者 对 象 : 它们 追随 一 个 或 多 个 发 布 者 ， 监 听 它 们 的 
通知 ， 并 作出 相应 的 反应 。 

对 观察 者 模式 你 可 能 很 熟悉 。 看 上 去 ， 观 察 者 模式 似乎 与 前 一 章 中 
所 讨论 浏览 器 事件 很 相似 。 确 实 如 此 ， 浏 览 器 事件 正 是 该 模式 的 一 个 典 
型 应 用 。 浏 览 器 是 发 布 者 : 当 一 个 事件 (如 onclick)〉 发 生 时 ， 它 会 发 出 
通知 。 事 件 订 阅 者 会 监听 这 类 事件 ， 并 在 事件 发 生 时 被 通知 。 浏 览 咒 
(发 布 者 ) 为 每 个 订阅 者 发 送 一 个 事件 对 象 ， 但 在 我 们 自己 的 实现 中 ， 
大 可 不 必 使 用 事件 对 象 ， 反 之 ， 可 以 使 用 任何 合适 的 数据 类 型 。 

通常 来 说 ， 观 察 者 模式 可 分 为 两 类 : 推送 和 拉动 。 推 送 模式 中 是 由 
发 布 者 负责 将 消息 通知 给 各 个 订阅 者 。 而 拉动 模式 则 要 求 订 疝 者 主动 跟 
踪 发 布 者 的 状态 变化 。 

下 面 ， 我 们 来 看 一 个 推送 模式 的 实例 。 我 们 把 与 观察 者 相关 的 代码 
放 到 一 个 单独 的 对 象 中 ， 然 后 以 该 对 象 为 一 个 混合 类 ， 将 它 的 功能 加 到 
发 布 者 对 象 中 。 如 此 一 来 ， 任 何 一 个 对 象 都 可 以 成 为 发 布 者 ， 而 任何 一 
个 功能 型 对 象 都 可 以 成 为 订阅 者 。 观 察 者 对 象 中 应 该 有 如 下 属性 和 方 

由 回调 函数 构成 的 订阅 者 数组 。 

用 于 添加 和 删除 订阅 者 的 addSubscriber() 和 removeSubscriber() 方 
ee 

publish() 方 法 ， 授 受 并 传递 数据 给 订阅 者 。 

make(0 方 法 ， 将 任意 对 象 转变 为 一 个 发 布 者 并 为 其 添加 上 述 方法 。 

以 下 是 一 个 观察 者 对 象 的 实现 代码 ， 其 中 包含 了 订阅 相关 的 方法 ， 
并 可 以 将 任 童 对象 转 变 为 发 布 者 。 


























var observer = { 
addSubscriber: function (callback) { 
if (typeof callback === "function") { 
this.subscribers[this.subscribers.length] = callback; 
} 
je 
removeSubscriber: function (callback) { 
for (var i = 0; i < this.subscribers.length; i++) { 
if (this.subscribers[i] === callback) { 


delete this.subscribers|i]; 


} 
ie 
publish: function (what) { 
for (var i = 0; i < this.subscribers.length; i++) { 
if (typeof this.subscribers[i] === 'function’) { 


this.subscribers[i](what); 


} 
} 


make: function (0) { // turns an object into a publisher 
for (var i in this) { 
if (this.hasOwnProperty(i)) { 
oli] = this[i]; 


o.subscribers = []; 


} 

}; 

接 下 来 ， 我 们 来 创建 一 些 订阅 者 。 订 阅 者 可 以 是 任意 对 象 ， 它 们 的 
唯一 职责 是 在 某 些 重 要 事件 发 生 时 调用 publish() 方 法 。 下 面 是 一 个 
blogger 对 象 ， 每 当 新 博客 准备 好 时 ， 就 会 调用 publish() 方 法 。 

var blogger = { 

writeBlogPost: function() { 
var content = "Today is ' + new Date(); 


this.publish(content); 


} 
i 
FAA Wa_times} A, ARABS AIR TORI, LS ALA 
publish() 方 法 。 


var la_times = { 
newlssue: function() { 
var paper = ‘Martians have landed on Earth!'; 
this.publish(paper); 
lon 
它们 都 很 容易 转变 为 友 布 者 : 
observer.make(blogger); 
observer.make(la_times); 
与 此 同时 ， 准 备 两 个 简单 对 象 jack 和 jill: 
var jack = { 
read: function(what) { 


console.log("I just read that " + what) 


var jill = { 
gossip: function(what) { 
console.log("You didn't hear it from me, but " + what) 
} 
}; 
他 们 可 以 订阅 blogger 对 象 ， 只 需要 提供 事件 发 生 时 的 回调 函数 。 
blogger.addSubscriber(jack.read); 








blogger.addSubscriber(jill.gossip); 

当 blogger 写 了 新 的 博客 时 会 发 生 什 么 事 呢 ? 结果 就 是 jack 和 jj 会 收 
到 通知 : 

> blogger.writeBlogPost(); 

I just read that Today is Fri Jan 04 2013 19:02:12 GMT-0800 (PST) 

You didn't hear it from me, but Today is Fri Jan 04 2013 19:02:12 
GMT-0800 (PST) 

ARTI jLAB AT BGA hd. Pe SES SAY, jill 
BLAS eFC BIE AVES 


> blogger.removeSubscriber(jill.gossip); 





> blogger.writeBlogPost(); 

I just read that Today is Fri Jan 04 2013 19:03:29 GMT-0800 (PST) 

jl 也 可 以 订阅 LATimes， 因 为 一 个 订阅 者 可 以 对 应 多 个 发 布 者 。 

> la_times.addSubscriber(jill. gossip); 

如 此 ， 当 LA Times 发行 新 的 期 刊 后 ，j 记 就 会 收 到 通知 并 执行 
jill. gossipQ 77 - 


> la_times.newlssue(); 





You didn't hear it from me, but Martians have landed on Earth! 


8.3 本 章 小 结 


在 本 章 中 ， 我 们 学 习 了 一 些 JavaScript 语言 中 通用 的 编程 模式 ， 了 
解 了 如 何 使 程序 简洁 、 干 净 ， 运 行 得 更 快 ， 以 便 能 更 好 地 与 其 他 程序 或 
库 工 作 。 然 后 我 们 讨论 了 如 何 实 现 Book of Four 一 书 中 介绍 的 部 分 设计 
模式 。 这 些 内 容 充 分 证 明了 ，JavaScript ”作为 一 门 功能 全 面 的 语言 ， 可 








以 很 容易 地 实现 这 些 经 典 模式 。 设 计 模 式 是 一 个 很 大 的 主题 ， 读 者 可 以 
通过 JSPatterns.com 网 站 与 本 书 著 者 进一步 讨论 JavaScript 中 的 模式 。 









































A 


在 这 篇 附录 中 ， 我 们 列 出 了 ECMAScript 5 (ES5) 所 定义 的 两 个 保 


留 字 列表 。 第 一 个 是 当前 所 用 的 保留 字 列 表 ， 第 二 个 则 是 为 将 来 预备 的 
保留 


字 列 表 。 
另外 ， 这 里 也 收录 了 ES3 中 出 现 过 、 但 今后 不 再 是 保留 字 的 单词 列 





保留 字 无 法 被 用 作 变 量 名 : 
var break = 1; // syntax error 


如 条 我 们 需要 在 对 象 属性 中 使 用 这 些 词 ， 就 必须 将 其 用 引号 括 起 





var o = {break: 1}; // OK inmany browsers, error in IE 
var o = {"break": 1}; // Always OK 
alert(o.break); // error in IE 
alert(o["break"]); // OK 
aa 役 保留 字 
这 里 列 出 了 ES5 中 的 现役 保留 
break 
case 
catch 
continue 
debugger 
default 


delete 

do 

else 

finally 

for 

function 

if 

in 

instanceof 

new 

return 

switch 

this 

throw 

try 

typeof 

var 

void 

while 

with 

预备 保留 字 
这 里 列 出 了 JavaScript 当 前 并 没有 使 用 ， 而 是 为 后 续 版 本 所 准备 的 保 


class 
const 
enum 


export 


extends 

implements 

import 

interface 

let 

package 

private 

protected 

public 

static 

super 

yield 

废除 的 保留 字 

这 里 列 出 了 在 ES5 中 已 被 废除 的 保留 字 。 但 考虑 到 老式 浏览 器 ， 最 
好 还 是 不 要 使 用 它们 作为 变量 名 。 


abstract 





boolean 
byte 
char 
double 
final 
float 
goto 

int 

long 
native 


short 


synchronized 
throws 
transient 


volatile 


附录 B A E pa By 


在 这 篇 附录 中 ， 我 们 列 出 了 在 第 3 章 函 数 中 所 讨论 过 的 所 有 内 建 函 
数 〈 即 全 局 对 象 的 方法 列表 ， 如 表 B-1 所 示 ) 。 
表 B-1 


函数 名 相关 说 明 
该 函数 有 两 个 参数 : 一 个 输入 对 象 及 一 个 进 制 基数 radix。 它 主要 用 
于 将 输入 转换 成 整数 值 并 返回 ， 如 果 转 换 失败 就 返回 NaN。 另 外 ， 
函数 会 忽略 输入 中 所 包含 的 指数 信息 。radix 的 默认 值 为 10( 即 十 进 
制 ), 但 由 于 忽略 该 参数 可 能 会 导致 一 些 不 可 预测 的 结果 (例如 当 您 
输入 08 这 样 的 数值 时 )， 所 以 最 好 还 是 始终 明确 指定 它 的 值 


parseInt () 
> parseInt ('10e+3'); 
10 
> parseInt('FEF'); 
NaN 
> parseInt('FF', 16); 
255 
该 函数 会 试图 将 其 接受 的 参数 转换 成 浮 点 数值 并 返回 。 它 可 以 处 理 
输入 中 的 指数 信息 
parseFloat () > parseFloat('10e+3"'); 
10000 


> parseFloat ('123.456test'); 
123.456 


函数 名 相关 说 明 
该 函数 名 是 “Is Not a Number” 的 缩写 ， 它 主要 用 于 判断 其 参数 是 
否 是 一 个 有 效 数 字 ， 如 果 是 就 返回 true， 否 则 就 返回 false. 5 
外 ， 该 函数 总 是 会 先 尝试 将 输入 值 转换 成 数字 


> isNaN (NaN); 
true 


isNaN () > isNaN (123); 
false 


> isNaN(parseInt('FF')); 
true 


> isNaN (parseInt ('FF', 16)); 

false 
在 该 函数 中 ， 如 果 我 们 的 输入 是 一 个 数字 (或 者 可 以 转换 为 数字 )， 
但 又 不 属于 Infinity 或 -Infinity, WBE true, 否则 就 返回 
false 

> isFinite(le+1000); 

isFinite () iaie 
> isFinite(-Infinity); 
false 


> isFinite ("123") ; 

true 
该 函数 会 将 输入 转换 为 符合 URL 编码 的 字符 串 ， 关 于 这 种 URL 编 
码 的 详细 信息 ， 读 者 可 以 参考 Wikipedia 中 的 相关 文章 : 
http://en.wikipedia.org/wiki/Url_encode 


> encodeURIComponent 
encodeURIComponent () (‘http://phpied.com/') ; 
"http%3Ats2F%2Fphpied.com%2F" 


> encodeURIComponent 
('some script?key=v@lue'); 
"some%20script%3Fkey%3Dv%40lue" 


续 表 


函数 名 


decodeURIComponent () 


encodeuURI () 


decodeURI () 


eval () 


相关 说 明 
该 函数 主要 用 于 解码 其 所 接受 的 URL 编码 字符 串 


> decodeURIComponent ('%20%40%20'); 
Ww @ Ww 


该 函数 主要 用 于 将 输入 转换 为 URL 编码 ， 但 它 始 终 假定 其 所 接受 
的 是 一 个 完整 的 URL， 因 此 它 所 编码 的 部 分 不 包括 目标 URL 的 协 
议 ( 例 如 nttp://) 和 域名 《例如 www.phpied.com) 


> encodeURI ('http://phpied.com/') ; 
http: //phpied.com/ 





> encodeURI ('some script?key=v@lue'); 
"some%20script?key=v@lue" 


该 函数 主要 用 于 执行 encodeURI () 的 反 操 作 


> decodeURI ("Some%20script?key=v@lue") ; 
"some script?key=v@lue" 


该 函数 会 执行 其 接收 到 的 JavaScript 代码 串 ， 并 返回 代码 串 中 最 后 
一 个 表达 式 的 执行 结果 
可 能 的 话 ， 请 尽量 避免 使 用 该 函数 


> Eval('l + 2"); 
3 


> eval ('parseInt("123")'); 
123 


> eval('new Array(1,2,3)"'); 
[1, 2, 3] 


> eval ('new Array (Ly 2,3) 7 1 4 Bye") z 
3 


附录 C A et xt 


在 这 篇 附录 中 ， 我 们 列 出 了 ECMAScript 标 准 中 所 描述 的 所 有 内 建 


构造 函数 ， 以 及 用 这 些 构造 函数 所 创建 对 象 的 方法 与 属性 。ES5 独 有 的 
API 会 被 单独 罗列 。 


型 ， 


Object 

ObjectO 是 用 于 创建 Object 对 象 的 构造 器 ， 例 如 : 

> var 0 = new Object(); 

当然 ， 我 们 也 可 以 使 用 对 象 标识 法 来 实现 同样 的 效果 : 

> var o = {}; // recommended 

该 构造 器 可 以 接受 任何 类 型 的 参数 ， 并 且 它 会 自动 识别 参数 的 类 
并 选择 更 合适 的 构造 右 来 完成 相关 操作 。 例 如 ， 如 采 我 们 传递 给 


new ObjectO 构 造 器 的 是 一 个 字符 串 ， 那 么 惑 相 当 于 调用 了 new String() 
构造 器 。 尽 管 这 种 做 法 不 值得 推荐 〈 比 起 让 程序 去 猜 ， 明 确 地 声明 会 更 


好 ) 


， 但 仍然 是 可 用 的 。 

> var 0 = new Object(something ); 
> o.constructor; 

function String(){[native code]} 

> var 0 = new Object(123); 

> o.constructor; 


function Number(){[native code]} 


语言 中 其 他 所 有 的 对 象 ， 无 论 是 内 建 的 还 是 自 定义 的 ， 都 继承 于 


Object (LÆ C-1, #C-2) 。 因 此 几乎 所 有 的 类 型 都 可 以 调用 Object 的 


方法 与 属性 。 
Object 构造 右 的 成 员 
表 C-1 


属性 /方法 相关 说 明 

该 属性 是 所 有 对 象 的 原型 (包括 Object 对 象 本 身 )， 语 言 中 的 其 他 
对 象 正 是 通过 在 该 属性 上 添加 东西 来 实现 它们 之 间 的 继承 关系 的 。 
所 以 请 小 心 使 用 


> = . ' tT). 
Object .prototype var s new String('noodles'); 


> Object.prototype.custom = 1; 


> Su SE 





1 
Object.prototype 的 成 员 
表 C-2 
属性 /方法 相关 说 明 
该 属性 指向 用 来 构造 该 对 象 的 构造 器 ， 在 这 里 为 object () 
> Object.prototype. constructor === Object; 
true 
constructor 
> var o = new Object (); 
> o.constructor === Object; 
true 
该 方法 返回 的 是 一 个 用 于 描述 目标 对 象 的 字符 串 。 特 别 地 ， 当 目 
标 是 一 个 Number 对 象 时 ， 我 们 还 可 以 传递 一 个 用 于 进 制 数 的 
参数 radix， 该 参数 的 默认 值 为 10 
toString (radix) > van o = {props Liy 


> 0a toString (); 
"[object Object]" 


> var n = new Number (255); 


续 表 


属性 /方法 相关 说 明 
> n.toString(); 
" 255 " 


> im. tostring (16); 
neen 


该 方法 的 作用 与 toString() 基 本 相同 , 只 不 过 它 会 做 一 些 本 地 
化 处 理 。 该 方法 会 根据 当前 对 象 的 不 同 而 被 重 写 ， 例 如 
Date()，Number()，Array()， 它 们 的 值 都 会 以 本 地 化 的 形式 
输出 。 当 然 ， 对 于 包括 ObjectO 在 内 的 其 他 大 多 数 对 象 来 说 ， 
该 方法 与 toString() 是 基本 相同 的 。 

在 浏览 器 环境 下 ， 我 们 还 可 以 通过 BOM 对 象 Navigator 的 
language 属性 (在 IE 中 则 是 userLanguage) 来 了 解 当 前 所 使 
用 的 语言 : 


toLocaleString () 


> navigator. language; 
"en-US" 


该 方法 返回 的 是 用 基本 数据 类 型 所 表示 的 this fA, MRE 
可 以 使 用 基本 数据 类 型 表示 的 话 。 例 如 Number 对 象 返回 的 
是 它 的 基本 数值 ， 而 Date 对 象 返回 的 是 一 个 时 间 戳 
Ctimestamp )。 如 果 无 法 用 基本 数据 类 型 表示 ， 该 方法 会 返回 
this KF 

> var o = {}; 


> typeof o.valueOf (); 
"object" 

valueOf () 
> o.valueOf() === 0; 


true 


> var n = new Number (101); 
> typeof n.valueOf(); 
"number" 


> n.valueOf() === n; 


false 


续 表 


属性 /方法 相关 说 明 
> var d = new Date(); 
> typeof d.valueOf (); 


valueOf () = er 


> d.valueOf (); 
1357840170137 


该 方法 仅 在 目标 属性 为 对 象 自 身 属性 时 返回 true， 而 当 该 属性 
是 从 原型 链 中 继承 而 来 或 根本 就 不 存在 时 返回 false 
> var o = {prop: 1}; 


> o.hasOwnProperty('prop'); 


hasOwnProperty (prop) aes 


> o.hasOwnProperty('toString'); 
false 


> o.hasOwnProperty('fromString'); 
false 


如 果 目 标 对 象 是 当前 对 象 的 原型 ， 该 方法 就 会 返回 true， 而 且 ， 
当前 对 象 所 在 原型 链 上 的 所 有 对 象 都 能 通过 该 测试 ， 并 不 局 限于 
它 的 直系 关系 


> var s = new String(''); 
> Object.prototype.isPrototypeOf (s); 


isPrototypeOf (obj) true 


> String.prototype.isPrototypeOf(s); 
true 


> Array.prototype.isPrototypeOf(s) ; 


false 
如 果 目 标 属性 能 在 for-in 循环 中 被 显示 出 来 , 该 方法 就 返回 true 
> 


> a.propertyIsEnumerable('length'); 


propertyIsEnumerable (prop) false 


> a.propertyIsEnumerable (0); 
true 


ECMAScript 5 中 附加 的 Object 属性 
在 ECMAScript 3 中 ， 除 了 一 些 内置 属 性 《〈 例 如，Math.PI) , WR 





所 有 的 属性 在 任何 时 候 都 可 以 被 修改 、 插 入 、 删 除 。 在 ESS 中 ， 我 们 可 
以 设置 属性 是 否 可 以 被 改变 或 是 删除 一 一 在 这 之 前 ， 它 是 内 置 属性 的 特 
权 。ES5 引 入 了 属性 描述 符 的 概念 ， 我 们 可 以 通过 它 对 所 定义 的 属性 有 
更 大 的 控制 权 。 

我 们 可 以 把 属性 描述 符 想 象 成 一 个 对 象 ， 我 们 用 该 对 象 来 描述 菏 个 
属性 所 具有 的 各 种 特征 。 描 述 这 些 特征 所 使 用 的 语法 与 一 般 的 对 象 标识 
法 无 异 ， 所 以 属性 描述 符 也 会 有 上 自己 的 属性 与 方法 。 在 这 里 ， 为 了 避免 
歧义 ， 我 们 将 属性 描述 符 的 属性 称 为 特性 (attributes〉。 这 些 特性 包 
括 : 
































value 当 试 图 获取 属性 时 所 返回 的 值 。 

writable 一 一 该 属性 是 否 可 写 。 

enumerable 一 一 该 属性 在 for-in 循环 中 是 否 会 被 枚 举 。 
configurable 一 一 该 属性 是 否 可 删除 。 

set() 一 一 该 属性 的 更 新 操作 所 调用 的 函数 。 

get() 一 一 获取 属性 值 时 所 调用 的 函数 。 


另外 ， 数 据 描述 符 《〈 其 中 属性 为 : enumerable，configurable， 
value, writable) 与 存 取 描 述 符 (其 中 属性 为 : enumerable， 
configurable, set(), get()) 之 间 是 有 互 斥 关系 的 。 在 定义 了 set0 和 getO 
之 后 ， 描 述 符 会 认为 存 取 操 作 已 被 定义 过 了 ， 其 后 再 定义 value 和 
writable 会 引起 错误 。 

以 下 是 ES3 风 格 的 属性 定义 方式 : 


var persion = {}; 





person.legs = 2; 

以 下 是 等 价 的 ES5 通 过 数据 描述 符 定 义 属性 的 方式 : 
var persion = {}; 

Object.defineProperty(person, "legs", { 


value: 2, 


writable: true, 
configurable: true, 
enumerable: true 

}); 

其 中 ， 除 了 value 的 默认 值 为 ndefined 以 外 ， 其 他 的 默认 值 都 为 
false。 这 也 就 意味 着 ， 如 果 我 们 想 要 通过 这 一 方式 定义 一 个 可 写 的 属 
性 ， 必 须 显 式 将 它们 设 为 true。 

或 者 ， 我 们 也 可 以 通过 ES5 的 存 取 描 述 符 来 定义 : 


var person = {}; 








Object.defineProperty(person, "legs", { 
set: function (v) {this.value = v;}, 
get: function(v) {return this.value;}, 
configurable: true, 
enumerable: true 
}); 
person.legs = 2; 
如 您 所 见 ， 现 在 我 们 手 里 多 了 许多 可 用 于 描述 属性 的 代码 ， 如 果 想 
要 防止 别人 鼻 改 我 们 的 属性 ， 就 必须 要 用 到 它们 。 此 外 ， 也 不 要 起 了 浏 
览 器 在 同 后 兼容 ES 方面 所 做 的 考虑 。 例 如 ， 跟 添加 Array.prototype 属 
性 不 一 样 ， 我 们 不 能 在 旧版 的 浏览 器 中 使 用 “shim” 这 一 特性 。 
另外 ， 我 们 还 可 以 (通过 定义 nonmalleable 属 性 ) 在 具体 行为 中 运 
用 这 些 描述 符 : 


> var person = {}; 





> Object.defineProperty(person, ‘heads’, {value: 1}); 
> person.heads = 0; 
0 


> person.heads; 


1 

> delete person.heads; 

false 

> person.heads; 

1 

下 面 ， 我 们 将 为 您 列 出 ES5 中 所 有 的 附加 Object 属性 见 表 C-3。 
表 C-3 


属性 /方法 相关 说 明 


之 前 在 ES3 中 ， 我 们 往往 需要 通过 Object.prototype. 
isPrototypeOf () 去 猜测 某 个 给 定 对 象 的 原型 是 什么 ， 如 今 
Object.getPrototypeOf (obj) 在 ES5 中 ， 我 们 可 以 直接 询问 该 对 象 “ 你 的 原型 是 什么 ?” 
> Object.getPrototypeOf([]) === 
Array.prototype; 
true 


正如 我 们 在 第 6 章 继承 中 所 讨论 的 那样 ， 该 方法 主要 用 于 创建 
一 个 新 对 象 ， 并 为 其 设置 原型 ,， 用‘ 上述) 属性 描述 符 定义 对 


象 的 原型 属性 。 
> var parent = {hi: 'Hello'}; 
> var o = Object.create(parent, { 
prop: { 
value: 1 
Object.create(obj, descr) } 
}); 
> OAL? 
"Hello" 


现在 ， 我们 甚至 可 以 用 它 来 创建 一 个 完全 空白 的 对 象 ， 这 样 的 
事情 在 ES3 中 可 是 做 不 到 的 。 

> var o = Object.create (null); 

> typeof o.toString; 

"undefined" 
该 方法 可 以 让 我 们 详细 查看 一 个 属性 的 定义 。 您 甚至 可 以 通过 
它 一 帘 那 些 内 置 的 ， 之 前 不 可 见 的 隐藏 属性 。 

> Object.getOwnPropertyDescriptor ( 

Object .getOwnPropertyDescrip Object.prototype, 'toString'); 


tor(obj, property) Object 
configurable: true 
enumerable: false 
value: function toString() { [native code] } 
writable: true 


该 方法 返回 一 个 数组 , 其 中 包含 了 当前 对 象 所 有 属性 的 名 称 ( 字 
Object.getOwnPropertyNames 符 串 )， 不 论 它们 是 否 可 枚 举 。 当 然 ， 您 也 可 以 用 object . 
Keys () 方法 来 单独 返回 可 枚 举 的 属性 。 
> Object.getOwnPropertyNames ( 
Object.prototype) ; 


(obj) 


续 表 


属性 /方法 相关 说 明 
Object.getOwnPropertyNames ["constructor", "toString", "tol leString", 
(obj) "valueOf",... 


Object.defineProperty (obj, 该 方法 可 通过 某 属性 描述 符 来 定义 某 对 象 的 属性 。 详 细 内 容 可 
descriptor) 参考 我 们 在 当前 表格 之 前 所 做 的 讨论 。 


S 


该 方法 的 作用 与 defineProperty () 基本 相同 ， 只 不 过 它 可 
以 用 来 一 次 定义 多 个 属性 。 
> var glass = 
Object.defineProperties({}, { 

"eglor"? { 

value: "transparent", 
Object.defineProperties (obj, wrivabies trys 
descriptors) }, 

"fullness": { 
value: "half", 
writable: false 

} 

1)F 
glass.fullness; 
"half" 


preventExtensions () 方法 用 于 禁止 向 某 一 对 象 添加 更 多 
属性 , 而 isExtensible () 方 法 则 用 于 检查 某 对 象 是 否 还 可 以 
被 添加 属性 。 


> var deadline = {}; 
> Object.isExtensible (deadline) ; 
true 
Object .preventExtensions (obj) > deadline.date = "yesterday"; 
"yesterday" 
> Object. 
preventExtensions (deadline) ; 
> Object.isExtensible (deadline) ; 
false 
> deadline.date = "today"; 
"today" 
> deadline.date; 
"today" 


Object.isExtensible (obj) 


续 表 


属性 /方法 
Object .preventExtensions (obj) 
Object.isExtensible (obj) 
Object.seal (obj) 


Object.isSealed (obj) 


Object. freeze (obj) 


Object.isFrozen (obj) 


Object. keys (obj) 


Array 


相关 说 明 


尽管 往 某 个 不 可 扩展 的 对 象 中 添加 属性 不 算是 一 个 错误 操作 ， 
但 它 没有 任何 作用 。 

> deadline.report = true; 

> deadline.report; 

undefined 


seal () 方 法 的 作用 与 breventExtensions () 基 本 相同 ， 但 
除 此 之 外 ， 它 还 会 将 所 有 现 有 属性 设置 成 不 可 配置 。 也 就 是 说 ， 
在 这 种 情况 下 , 我 们 只 能 变更 现 有 属性 的 值 , 但 不 能 删除 或 用 
defineProperty() ) 重新 配置 这 些 属性 , 例如 不 能 将 一 个 可 
枚 举 的 属性 改 成 不 可 枚 举 。 
该 方法 用 于 执行 一 切 不 受 seal () 方法 限制 的 属性 值 变更 。 

> var deadline = Object.freeze ( 

{date: "yesterday"}); 

> deadline.date = "tomorrow"; 

> deadline.excuse = "lame"; 

> deadline.date; 

"yesterday" 

> deadline.excuse; 

undefined 

> Object.isSealed (deadline); 

true 


该 方法 是 一 种 特殊 的 for-in 循环 。 它 只 返回 属于 当前 对 象 的 
属性 (不 像 for-in)， 而 且 这 些 属 性 也 必须 是 可 枚 举 的 〈 这 点 
与 Object .getOwnPropertyNames () 不 同 )。 返 回 值 是 一 个 
字符 串 数组 。 


> Object.prototype.customProto = 

LOLs 

> Object.getOwnPropertyNames ( 
Object.prototype) ; 

["constructor", "toString", ..., "customProto"] 

> Object.keys (Object.prototype) ; 

["customProto"] 

> var o = {own: 202}; 

> o.customProto; 

101 

> Object.keys (o); 

["own"] 


Array0O 是 一 个 用 来 创建 数组 对 象 的 构造 器 〈 见 表 C-4) : 


> var a = new Array(1,2,3); 

当然 ， 我 们 同样 也 能 使 用 数组 标识 法 : 

> var a = [1,2,3]; //recommended 

需要 注意 的 是 ， 如 果 我 们 传递 给 ”Array0 构 造 器 的 是 一 个 数字 ， 该 
数字 就 会 被 设 定 为 数组 的 长 度 。 


> var un = new Array(3); 


> un.length; 

3 

PE aS Se ARH PT 2 E AY BLAIS OR BE BU, FRR BE DO A 
以 undefined 值 填充 。 

> un; 


[undefined, undefined, undefined] 

以 此 方法 构建 的 数组 只 有 长 度 ， 却 不 含 元 素 。 这 种 数组 与 一 般 的 有 
元 系 的 数组 有 一 些微 妙 的 兰 别 : 

>'O' ina; 

true 

>'O' in un; 

false 

1X — Fell HY HES BLA ray (Mie a ET CE RA PhS) 
与 你 的 预想 不 符 。 例 如 ， 下 面 是 一 个 用 数组 标识 法 创建 的 有 效 数组 : 

> var a = [3.14]; 

>a; 

[3.14] 

PRIM, MWMRRA TRZE AAR BA Array at Ate, A Ha: 

> var a = new Array(3.14) 

Range Error: invalid array length 


Array.prototype 的 成 员 


表 C-4 


属性 /方法 


Length 


concat (11, 12, 13, 


join (separator) 


pop () 


PUSKEE; I2; Te ass) 





相关 说 明 
该 属性 返回 的 是 数组 中 元 素 的 个 数 
> [Errr 4] Length; 
4 
该 方法 主要 用 于 合并 数组 
> [1,2] «comeat ( (3,5), C riL Ye? 
[ly 2; 3; Se Te 11] 


该 方法 用 于 将 数组 中 的 元 素 连 成 一 个 字符 串 。 我 们 可 以 通过 参数 来 





指定 元 素 之 间 的 分 割 字符 串 ， 其 默认 值 是 逗号 
> [1,2,3].join(); 
"1 å 2 x 3" 


> [1,2,3].join('"|"'); 
"11213" 


= [1,2,38].jerm(" is Less than T)? 

"1 is less than 2 is less than 3" 
该 方法 用 于 移 除 数组 中 的 最 后 一 个 元 素 ， 并 将 其 返回 

> var a = ['un', 'deux', 'trois']; 

> a.pop(); 

"trois" 


> aj 
["une", "deux"] 
度 


木 


> var a = []; 
> a.pushi("zig’, ‘zag', “zebna",. zoo") s 
4 


法 用 于 将 新 元 素 添 加 到 数组 的 末尾 ， 并 返回 修改 后 的 数组 


续 表 


属性 /方法 


reverse () 


shift () 


slice (start_index, 


end_index) 


sort(call back) 


相关 说 明 
该 方法 用 于 反 转 数组 中 的 元 素 顺 序 ， 并 返回 修改 后 的 数组 
> var a = [172% 3]; 
> a.reverse(); 
[3r 2, ZT] 
> a; 
[3 2% 2] 


该 方法 与 pop () 基本 相同 ， 只 不 过 这 里 移 除 的 是 首 元 素 ， 而 不 是 最 
后 一 个 元 素 


> Var a = [1,2, 3) 3 
> a.ShLét () 3 
1 
> a; 
[2，3] 
该 方法 用 于 截取 数组 的 某 一 部 分 ， 但 不 会 对 原 数 组 进行 任何 修改 
> var a = ['apple', 'banana', 


is", Ves", "“erange" ]; 
> a.slice(2,4); 
mas"; "ess"] 


> a; 
["apple", "banana", "js", "css", "orange"] 

该 方法 主要 用 于 数组 的 排序 , 它 有 一 个 可 选 参数 ， 是 一 个 回调 函 
数 ,我 们 可 以 用 它 来 自 定义 排序 规则 。 该 函数 应 该 以 两 个 数组 元 
素 为 参数 ， 两 个 参数 相等 时 返回 0， 第 一 个 参数 大 时 返回 正 数 ， 
第 二 个 参数 大 时 返回 负数 

下 面 我 们 来 演示 一 个 按 数 字 顺 序 排序 的 自 定 义 函数 〈 默 认 是 按照 字 
符 顺 序 的 ): 


function customSort(a, b) { 
if (a > b) return 1; 
if (a < b) return -1; 


return 0; 


续 表 


属性 /方法 相关 说 明 





然后 ， 我 们 将 其 应 用 于 sort () 方法 : 
> Var a= [10ls 987 Jy 5]; 


> a.sort.() 7 

[iy LOL; 5; 99] 

> a. sort, (customSort),; 
[1, 5, 99, 101] 


sort(call back) 


> [7, 6,5,9] «sort (customSort) ; 
[5, 6, 7, 9] 
该 方法 可 在 删除 元 素 的 同时 添加 新 的 元 素 。 第 一 个 参数 所 表示 的 是 要 
删除 元 素 的 始 起 位 置 ， 第 二 个 参数 代表 的 是 要 删除 元 素 的 个 数 ， 其 余 
参数 则 都 是 一 些 将 要 插入 在 此 处 的 新 元 素 
splice(start, delete_ > var a = ['apple', 'banana', 
count; ily Be. Bypass) "J's tess", Verange: l? 
> a.splice(2, 2, 'pear', 'pineapple'); 
iris"; "css"] 
> aig 
["apple","banana","pear","pineapple","orange"] 
该 方法 的 功能 与 push () 方 法 类 似 ， 只 不 过 元 素 将 会 被 添加 到 数组 的 
开始 处 ， 而 不 是 末尾 处 。 另 外 和 shift () 方 法 一 样 ， 它 也 会 在 添加 完 
元 素 后 返回 修改 后 的 数组 长 度 
unshi Ge Le Ae 过 人 > War a= [1,23]? 
>= anshape (Merne!’, “awa 
5 
> a 


["one", "Ewo"; 1, 2; 3] 
fEECMAS cript 5 中 增加 的 Array 属 性 
表 C-5 
属性 /方法 相关 说 明 
用 于 分 辨 某 个 对 象 是 否 是 数组 
由 于 typeof 无 法 分 辨 数组 : 


Array. 


isArray (obj) 





属性 /方法 相关 说 明 


> var arraylike = {0: 101, length: 1}; 
> typeof arraylike; 

"object" 

> typeof[]; 

"object" 


RACE “TRE” OMA “HS PAR” EE, Wa P 
种 类 型 风格 ， 它 的 理论 基础 是 : WMR R S LEER FAE ike 
来 也 像 鸭子 ， 那 么 它 就 是 鸭子 ): 


typeof arraylike.length; 
"number" 


Array. 在 ES3 中 ， 为 判断 数组 ， 我 们 需要 这 么 处 理 : 

> Object.prototype.toString.call([]) 
=== "[object Array]"; 

true 


isArray (obj) 


> Object.prototype.toString.call (arraylike) 
=== "object Array"; 
false 


在 ESS 中 ， 我 们 有 了 更 为 简短 的 方法 : 
> Array.isArray([]); 
true 


> Array.isArray (arraylike) ; 

false 
搜索 数组 ， 返 回 第 一 个 匹配 元 素 的 下 标 。 如 果 没 有 匹配 项 ， 该 函数 返 
回 -1。 第 二 个 参数 为 可 选项 ， 为 搜索 的 起 始 下 标 


> var ar = {'one', 'two', ‘one', 'two'}; 
> ar.indexOf (two); 

Array.prototype. 1 

indexOf (needle, idx) > ar.indexOf('two', 2); 
3 


> ar.indexOf('toot'); 
-1 


5 indexof () 的 功能 类 似 。 从 后 往 前 地 搜索 数组 


属性 /方法 相关 说 阴 


> var ar = ['one', 'two', "opet, 'two']; 
> ar.lastIndexOf ('two'); 
3 


Array.prototype. 


> ar.lastIndexOf('two', 2); 
lastIndexOf (needle, idx) 


> ar.indexOf('toot'); 
-1 
for 循环 语法 的 蔡 代 。 Ae XH callback 函数 会 为 每 个 数组 元 素 执 
行 一 次 。callback 函数 会 收 到 三 个 参数 : 本 次 循环 的 元 素 ， 该 元 素 
的 下 标 ， 以 及 整个 数组 
> var log = console.log.bind(console) ; 
Array.prototype. > var ar = [‘itsy",; "bitsy", “spider"].; 
> ar.forEach (log); 
itsy 0 ["itsy", "bitsy", "spider"] 
this_ob}) bitsy 1 ["itsy", "bitsy", "spider"] 
spider 2 ["itsy", "bitsy", "spider"] 
forEach 函数 的 第 二 个 参数 为 可 选项 ， 该 参数 为 callback 函数 的 
调用 者 。 以 下 代码 与 上 述 代码 等 价 : 
> ar.forEach (console.log, console); 
自 定义 的 callback 函数 会 为 每 个 元 素 执行 一 次 。 每 次 执行 都 应 根据 
元 素 返 回 true 或 者 false， 代 表 该 元 素 是 否 通 过 测试 。callback 
获得 的 参数 与 forEach 相同 。 
如 果 所 有 元 素 都 通过 了 测试 ，every () 函数 返回 true. RZ, WR 


forEach (callback, 


Array.prototype. 至 少 有 一 个 元 素 未 通过 测试 ，evezy () 函数 返回 false 
every (callback, > function hasEye(el, idx, ar) { 
return el.indexOf('i') !== -1; 
this obj) } 
> ['itsy', 'bitsy', 'spider'].every(hasEye) ; 
true 
> ['eency', 'weency', 'spider' ], 
every (hasEye) ; 
false 


续 表 


属性 /方法 


Array.prototype. 
some (callback, 


this obj) 


Array.prototype. 
filter (callback, 
this obj) 


Array.prototype. 
map (callback, 
this obj) 


Array.prototype. 


reduce (callback, start) 


相关 说 明 


循环 中 ， 若 every () 结果 显然 为 false， 则 循环 会 中 止 并 且 立 即 返 
回 false 
> [1,2,3] .every (function (e) { 
console.log (e); 


return false; 


})? 
1 
false 


5every() 类 似 ， 返 回 值 为 “是 否 至 少 有 一 个 元 素 通 过 测试 ”: 
> ['itsy', 'bitsy', 'spider'].some (hasEye) ; 
true 


> ['eency', 'weency', 'spider']. 
some (hasEye) ; 
true 


与 some () 及 every() 类 似 ， 返 回 所 有 符合 测试 的 元 素 : 


> [‘'itsy', 'bitsy', '"spider'].filter(hasEye) ; 
["itsy" A "bitsy" ; " spider"] 


> ['eency', 'weency', 'spider'].filter(hasEye) ; 
["spider"] 
与 forEach 类 似 。 返 回 值 为 数组 ， 数 组 元 素 为 每 次 callback () K 
数 的 返回 值 。 这 个 例子 会 将 数组 元 素 内 的 字母 都 转 为 大 写 : 
> function uc(element, index, array) { 


return element.toUpperCase(); 


} 
> ['eency', 'weency', 'spider'].map(uc); 
["EENCY", "WEENCY", "SPIDER" ] 


为 每 个 元 素 执行 一 次 callback MM. MK callback 的 返回 值 都 
会 作为 下 一 次 循环 的 参数 。 最 终 ， 对 整个 数组 的 操作 将 返回 一 个 单一 
的 值 。 


> function sum(res, element, idx, arr) { 
return res + element; 
} 
> [1, 2, 3].reduce (sum); 
6 


续 表 


属性 /方法 相关 说 明 
statt 人 参数 为 可 选 参数 ， 如 果 设 置 ， 将 作为 第 一 次 callback () 执 


Array.prototype. 行 时 的 传 入 参数 : 
reduce (callback, start) > [ln 2, 3].reduce(Sum, 100); 
106 


Ej reduce () 类 似 ， 但 从 后 到 前 地 遍历 数组 元 素 : 


> function concat(result_so_ far, el) { 
return, " + pesult. so far + él, 
Array.prototype. } 


reduce (callback, start) > [lr 2, 3]-neduce(concat), 


> [1, 2, 3].reduceRight (concat) ; 





Function 

在 JavaScript F, Rath POR, A Wakil Function( ty i 48k 
定义 ， 例如: 

> var sum = new Function(‘a’, 'b', 'return a + b;'); 

这 与 下 面 的 函数 标识 法 执行 效果 是 相同 的 。 但 在 大 多 数 情况 下 ， 我 
们 并 不 至 励 上 述 做 法 : 


> var sum = function(a, b){ 





return a + b; 
ie 
当然 ， 我 们 还 有 更 常见 的 函数 定义 方式 : 


> function sum(a, b){ 





return a + b; 


} 
Function.prototype 的 成 员 
表 C-6 


属性 /方法 相关 说 明 


该 方法 主要 用 于 在 当前 对 象 的 this 值 上 调用 其 他 函数 。apply () 的 第 一 
个 参数 所 引用 的 是 将 要 绑 定 到 this 值 上 的 函数 对 象 。 而 第 二 个 参数 是 一 
个 数组 ， 用 于 存储 调用 该 函数 对 象 时 所 需 的 参数 。 

function whatIsIt() { 


return this.toString(); 
} 
params_array) > var myObj = {}; 
> whatIsIt.apply (myObj) ; 
" [object Object]" 





apply (this_obj, 


> whatIsIt.apply (window); 
" [object Window]" 
call(this_obj, pl, | 该 方法 与 apply () 基本 相同 ， 只 不 过 其 调用 函数 所 需 的 参数 是 一 个 一 个 传 
pt, põr wes} 递 的 ， 而 不 再 是 一 个 数组 
该 属性 返回 的 是 函数 所 预期 的 参数 个 数 


> parseInt.length; 


2 
让 我 们 来 看 一 下 call () 5 apply () 两 个 函数 在 这 一 属性 上 的 差异 : 
length > Function.prototype.call.length; 
1 


> Function.prototype..apply.length; 
2 


call () 的 length 属性 值 为 1， 因 为 该 函数 只 有 第 一 个 参数 为 必须 参数 。 
ECMAScript 5 对 Function 的 附加 支持 
表 C-7 

属性 /方法 相关 说 明 


通过 此 函数 可 以 为 函数 调用 指定 this 值 。cal1 () WES apply () 方 法 
会 直接 执行 函数 ， 而 bind () 方 法 会 返回 新 的 函数 。 比 较 常用 的 场景 是 ， 
当 你 需要 将 A 方法 作为 B 对 象 的 某 个 方法 的 回调 函数 , 而 我 们 希望 A 方法 


Function.prototype. 





bind () 的 this 指向 另 一 个 对 象 时 
> whatIsIt.apply (window) ; 
"[Tobject Window] " 
Boolean 


Boolean0 构 造 器 所 创建 的 是 一 个 布尔 类 型 的 对 象 〈 这 并 不 等 同 于 基 
本 布尔 类 型 ) 。 由 于 这 种 布尔 对 象 的 实际 作用 很 有 限 ， 因 此 这 里 将 它 列 





出 来 ， 完 全 只 是 出 于 知识 的 完整 性 考虑 。 

> var b = new Boolean(); 

> b.valueOfQ); 

false 

> b.toString(); 

"false" 

需要 注意 的 是 ， 布 尔 对 象 与 基本 布尔 值 并 不 相同 。 正 如 我 们 所 了 解 
所 有 对 象 本 质 上 都 属于 truthy 值 。 


> b === false; 





的 


-> 


false 

> typeof b; 

"object" 

另外 ， 除 了 从 Object 中 继承 来 的 内 容 外 ，Boolean 对 象 中 并 没有 任何 
其 他 属性 。 

Number 

下 面 我 们 来 创建 一 个 数字 对 象 : 

> var n = new Number(101); 

> typeof n; 

"object" 

> n.valueOf(); 

101 

需要 注意 的 是 ，Number 对 象 并 不 等 同 于 基本 数字 类 型 ， 但 如 果 我 
们 在 某 个 基本 数字 类 型 值 上 调用 了 一 个 Number.prototype 的 方法 ， 那 么 
该 基本 数字 类 型 就 会 被 目 动 转换 成 Number 对 象 ， 例 如 : 

> var n = 123; 

> typeof n; 


"number" 


> n.toString(); 
"123" 

脱离 new 修 饰 符 而 单独 使 用 的 NumberO 函 数 返 回 基本 数字 类 型 。 
> Number("101"); 
101 

> typeof Number("101"); 


"number" 


> typeof new Number("101"); 


"object" 


Number 构 造 器 的 成 员 


Number 


Number 


Number. 


Number 


Number 


属性 /方法 


. MAX_VALUE 


. MIN _ VALUE 


NaN 


. POSITIVE -INEINLTIY 


. NEGATIVE INFINITY 


Number 对 象 的 成 员 





表 C-8 
相关 说 阴 
该 属性 返回 是 一 个 常量 (不 可 变 的 )， 表 示 该 对 象 所 能 取 的 最 大 值 


> Number .MAX VALUE; 
1.7976931348623157e+308 





该 属性 返回 的 是 JavaScript 中 的 最 小 值 
> Number .MIN VALUE; 
5e-324 
该 属性 返回 的 是 一 个 表示 “Not A Number” WE 


> Number.NaN; 


NaN 

NaN 与 任何 值 都 不 相等 ， 包 括 它 自己 。 
> Number .NaN === Number. NaN; 
false 


与 全 局 变量 Infinity 一样 


5-Infinity 一 样 


表 C-9 


属性 /方法 


toFixed(fractionDigits) 


toExponential 


(fractionDigits) 


toPrecision (precision) 


String 


相关 说 明 
该 方法 将 返回 一 个 字符 串 ， 以 定点 小 数 的 形式 来 表示 某 一 
数字 ， 并 进行 四 舍 五 入 
> var n = new Number (Math.PI) ， 


> n.valueOf (); 
3.141592653589793 


> n.toFixed(3); 


"3.142" 
该 方法 将 返回 一 个 字符 串 ， 以 指数 形式 来 表示 某 一 数字 ， 
并 进行 四 售 五 入 

> var n = new Number (56789); 


> n.toExponential (2); 
"5.68e+4" 


该 方法 将 返回 一 个 字符 串 ， 其 表示 的 数字 形式 既 可 以 是 指 
数 型 的 ， 也 可 以 是 定点 小 数 型 的 
> var n = new Number (56789); 


> n.toPrecision (2) 
"5. 7et4" 


> n.toPrecision(5); 
"56789" 


> n.toPrecision (4); 
"5.679e+4" 


> var n = new Number (Math.PI); 
> n.toPrecision (4); 
"3.142" 


StringO 是 一 个 用 于 创建 字符 溃 对 象 的 构造 器 ， 如 条 我 们 在 一 个 基本 
字符 串 值 上 调用 属于 该 对 象 的 方法 ， 那 么 该 字符 串 就 会 被 目 动 转换 为 


String 对 象 。 


下 面 ， 我 们 来 创建 一 个 字符 串 对 象 和 一 个 基本 字符 串 : 


> var s_obj = new String(‘potatoes'); 


> var s_prim = 'potatoes’; 


> typeof s_obj; 
"object" 


> typeof s_prim; 


"string" 

当 我 们 使 用 ===《〈 严 格 等 于 ) 比较 该 对 象 和 基本 类 型 时 ， 它 们 是 不 
相等 的 。=== 与 == 的 不 同 点 在 于 后 者 会 自动 进行 类 型 转换 。 

> S_obj === s_prim; 

false 


> S_obj == s_prim; 

true 

length 这 个 属性 实际 上 是 字符 串 对 象 的 。 

> s_obj.length; 

8 

如 果 我 们 在 一 个 不 属于 对 象 的 基本 字符 串 上 访问 length 属 性 ， 该 字 
符 串 就 会 自动 被 转换 成 相应 的 对 象 ， 并 成 功 返 回 字 符 串 长 度 ， 比 如 : 

> s_prim.length; 

8 

字符 串 标识 法 同样 有 效 : 

> "giraffe" length; 

7 

String () (Jie ai AY en 

表 C-10 
属性 /方法 相关 说 明 
该 方法 会 根据 用 户 输入 的 字符 编码 来 创建 字符 串 ， 并 将 其 返回 
> String.fromCharCode (115, 99, 114, 


105% 112; 16) 4 
"script" 





String.fromCharCode (codel, 


code2, code3, ...) 





String.prototype 的 成 员 


#€C-11 


属性 /方法 相关 说 明 
该 属性 返回 字符 串 中 的 字符 数量 


> new String('four').length 
4 


该 方法 返回 指定 位 置 处 的 字符 ， 位 置 从 0 开始 计数 
> "script".charAt (0); 
net 


Charat (Dosition) 从 ES5 开始 ， 也 可 以 使 用 数组 标识 法 来 代替 。 其 实在 ESS 之 前 ， 
这 个 特性 长 久 以 来 就 被 TE 以 外 的 浏览 器 广 为 支 持 


> "Script" (0) ; 
tet 


该 方法 返回 指定 位 置 处 字符 的 Unicode 编码 
> "script".charCodeAt (0) ; 


length 


charCodeAt (position) 


115 
该 方法 利用 当前 字符 串 将 输入 中 的 各 个 子 串 连接 成 一 个 新 的 字符 串 
Conesat (stri; tS gowa) > "" concat ('zig', "=i, Tag'i; 
"zig-zag" 


该 方法 用 于 返回 匹配 串 的 起 始 位 置 。 第 二 个 参数 是 可 选 的 ， 
用 于 指定 搜索 的 开始 位 置 。 如 果 方 法 没有 找到 匹配 串 ， 就 会 
返回 -1 


> "javascript".indexOf('scr'); 
4 


indexOf (needle, start) 


> "jJavascript".indexOf('scr', 5); 
=f 


该 方法 与 indexof () 的 功能 基本 相同 ， 只 不 过 它 的 搜索 是 从 后 面 


人 开始 的 ， 例 如 我 们 要 搜索 字符 串 中 的 最 后 一 个 “a”: 


start) > "Javascript". lastIndexOf('a"'); 
3 
该 方法 会 将 两 个 字符 串 放 在 当前 区 域内 进行 比 对 ， 如 果 两 个 字符 
localeCompare (needle) 串 完 全 相同 就 返回 0， 如 果 比 较 时 needle 中 的 字符 序列 靠 前 就 返 


回 1， 和 否则 就 返回 -1 


续 表 


属性 /方法 


localeCompare (needle) 


match (regexp) 


replace (needle, 


replacement) 


search (regexp) 


slice(start, end) 


split(separator, limit) 


相关 说 明 
> "script".localeCompare ('crypt'); 


1 


> "script".localeCompare('sscript"); 
-1 
> "script".localeCompare('script'); 
0 
该 方法 会 根据 其 接受 的 正则 表达 式 对 象 返回 一 个 容纳 所 有 匹配 串 
的 数组 
> "R2-D2 and C-3PO".match(/[0-9]/g); 
[m2m MQ MSI 
该 方法 用 于 替换 字符 串 对 象 中 所 有 匹配 相关 正则 表达 式 的 内 容 。 
另外 ， 我 们 还 可 以 通过 replacement 参数 设置 一 系列 不 同 的 匹配 模 
HK, PASI $2. corer s $9 
> "R2-D2".replace(/2/g, '-two'); 
"R-two-D-two" 
> "R2-D2".replace(/(2)/g, '$1$1'); 
"R22-D22" 
该 方法 会 返回 正则 表达 式 匹 配 的 第 一 个 子 串 的 位 置 


> "C-3P0".search(/[0-9]/) 
2 


该 方法 会 返回 字符 串 中 start 到 end 之 间 的 部 分 。 如 果 start 的 
值 是 个 负数 , 那么 开始 位 置 实际 上 等 于 length+start, 同样 的 ， 
如 果 end 的 值 是 负数 ， 其 结束 位 置 等 于 length+end 


> "R2-D2 and C-3P0".slice (4,13); 
"2 and C-3" 


> "R2-D2 and C-3P0".slice(4,-1); 

"2 and C-3P" 
该 方法 可 以 将 字符 串 转换 成 一 个 数组 。 它 的 第 二 个 参数 limit 是 
可 选 的 。separator 参数 是 一 个 正则 表达 式 ， 也 可 以 是 字符 串 

> Wi a3 A" pleE tA A; 

pean; TRT wa. vari 


> E PE ol Cp Qe 
"i" š w21] 


续 表 


属性 /方法 相关 说 明 





该 方法 的 功能 与 slice () 基本 相同 。 如 果 start 或 end 为 负 值 或 
无 效 值 时 ， 它 们 会 被 视 为 0。 如 果 它 们 的 值 大 于 length， 则 都 会 被 
A length. WR end 大 于 start， 则 它们 会 自动 交换 彼此 的 值 
substring(start, end) > "R2-D2 and C-3PO0".substring(4, 13); 
"2 and C-3" 


> "R2-D2 and C-3PO".substring(13, 4); 





"2 and C-3" 
a S 这 两 种 方法 都 可 将 字符 串 内 容 转换 为 小 写 
toLocaleLowerCase () 站 
"java" 
toüppertase Ü 这 两 种 方法 都 可 将 字符 串 内 容 转换 为 大 写 
toLocaleUpperCase () > "Script".toUpperCase(); 
"SCRIPT" 


ECMAScript5 对 String 的 补充 
表 C-12 
属性 /方法 相关 说 明 
在 ES3 中 ， 我 们 通过 使 用 正则 表达 式 相 关 的 方式 来 移 除 字符 串 首 
末 的 空 字 符 。 在 ES5 中 ， 我 们 有 了 专门 的 函数 trim(): 


String.prototype. > " Nt beard \n".trim(); 





trim () "beard" 
也 可 以 使 用 ES3 的 方式 : 
> " \t beard \n".replace(/\s/g, ""); 
"beard" 
Date 





Date() 构 造 器 可 以 有 以 下 几 种 不 同 的 输入 类 型 。 

我 们 可 以 分 别 将 年 、 月 、 日 、 小 时 、 分 钟 以 及 毫秒 的 值 传 递 给 构造 
ar, WM: 

> new Date(2015, 0, 1, 13, 30, 35, 505); 

Thu Jan 01 2015 13:30:35 GMT-0800 (PST) 

上 面 所 列 出 的 这 些 参数 ， 都 是 可 以 跳 过 的 ， 在 这 种 情况 下 它们 会 被 


默认 为 ”0。 要 注意 的 是 ， 月 份 的 值 是 从 0〈 一 月 ) 到 11〈 十 二 月 ) 的， 
小 时 的 值 是 从 0 到 23 的 ， 分 钟 和 秒 数 的 值 都 是 0 到 59， 坚 秒 数 则 是 从 0 到 


999 。 


我 们 可 以 传递 给 构造 右 一 个 时 间 惟 ; 

> new Date(1420147835505); 

Thu Jan 01 2015 13:30:35 GMT-0800 (PST) 

如 果 我 们 没有 传递 给 构造 器 任何 参数 ， 它 就 会 返回 当前 日 期 /时 


间 : 

> new Date(); 

Fri Jan 11 2013 12:20:45 GMT-0800 (PST) 

如 果 我 们 传递 的 是 一 个 字符 串 ， 那 么 它 会 自动 分 析 并 提取 该 字符 串 
中 的 有 效 日 期 信息 : 

> new Date('May 4, 2015'); 

Mon May 04 2015 00:00:00 GMT-0700 (PDT) 

不 使 用 new 修 饰 符 而 直接 调用 Date() 获 得 的 是 当前 时 间 的 字符 串 形 
xk: 


> Date() === new Date().toString(); 
true 
Date() 构 造 器 的 成 员 

表 C-13 


相关 说 明 
该 方法 的 作用 与 直接 将 字符 串 传 递 给 new Date () 类 似 ， 它 会 分 析 参 
数字 符 串 中 的 日 期 信息 并 返回 相应 的 时 间 戳 ， 如 果 失 败 则 返回 NaN 


> Date.parse('May 5, 2015'); 
1430809200000 


属性 /方法 


Date.parse (string) 


> Date.parse('4th'); 
NaN 





该 方法 返回 的 也 是 一 个 时 间 惟 ， 只 不 过 这 回 是 UTC AY Ta) CB 
Coordinated Universal Time )， 不 是 本 地 时 间 


区 了 
1420119035505 


Date .UTC (year, month, date, 


hours, minutes, seconds, ms) 





Date.prototype 的 成 员 
表 C-14 


属性 /方法 相关 说 明 及 示例 
该 方法 与 toString () 基本 相同 ， 但 返回 的 是 UTC 时 间 ， 下 面 我 们 
来 看 看 太平 洋 时 间 (PST)、 本 地 时 间 与 UTC 之 间 究 竟 有 哪些 不 同 ， 
> var d = new Date(2015, 0, 1); 


toUTCString () > d.toString(); 
"Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


> d.toUTCString(); 
"Thu, 01 Jan 2015 08:00:00 GMT" 


该 方法 只 返回 toString () 中 的 日 期 部 分 : 
> new Date(2015, 0, 1).toDateString(); 
"Thu Jan 01 2015" 
该 方法 只 返回 toString () 中 的 时 钟 部 分 : 
> new Date(2015, 0, 1).toTimeString(); 
"00:00:00 GMT-0800 (PST)" 
这 三 个 方法 基本 上 分 别 与 tostring()、toDateString() 以 及 
toTimeString () 等 效 。 但 格式 更 为 友好 ， 能 使 用 当前 用 户 所 设置 


toDateString () 


toTimeString () 


toLocaleString() 的 方式 来 显示 信息 
toLocaleDateString () > new Date(2015, 0, 1).toString(); 
toLocaleTimeString () "Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


> new Date(2015, 0, 1).toLocaleString(); 

"1/1/2015 12:00:00 Am" 
这 组 方法 用 于 获取 或 设置 某 一 Date 对 象 中 的 时 间 〈 以 时 间 恰 的 形 
式 )。 在 下 面 的 示例 中 ， 我 们 演示 了 如 何 创建 一 个 Date 对 象 ， 并 将 它 
的 日 期 后 移 一 天 : 

> var d = new Date(2015, 0, 1); 


> d.getTime(); 


人 1420099200000 

setTime (time) 
> d.setTime (d.getTime () 
+ 1000 * 60 * 60 * 24); 


1420185600000 


> d.toLocaleString(); 
"Fri Jan 02 2015 00:00:00 GMT-0800 (PST)" 


属性 /方法 


getFullYear () 
getUTCFullYear () 
setFullYear (year, month, 
date) 

setUTCFullYear (year, 


month, date) 


getMonth () 
getUTCMonth () 
setMonth(month, date) 


setUTCMonth (month, date) 


getDate () 
getUTCDate () 
setDate (date) 


setUTCDate (date) 


相关 说 明 及 示例 
这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 全 年 份 信息 (包括 本 地 时 间 
和 UTC 时 间 )。 在 这 里 不 能 用 getYear () ， 因 为 它 并 不 适用 于 公 
元 两 千年 之 后 的 年 时 ， 所 以 还 是 使 用 getFullYear () 方法 为 好 


> var d = new Date(2015, 
> d.getYear(); 
115 


> d.getFullYear (); 
2015 


> d.setFullYear (2020); 
1577865600000 


> ids 


Wed Jan 01 2020 00:00:00 GMT-0800 (PST) 
这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 月 份 信息 ， 它 是 从 0 (一 月 ) 
开始 计数 的 : 


> var d = new Date(2015, 
> d.getMonth (); 
0 


> d.setMonth(11); 
1448956800000 


> d.toLocaleDateString(); 


"12/1/2015" 


> var d = new Date(2015, 


> d.toLocaleDateString(); 


1/1/2015" 


> d.getDate(); 
1 


> d.setDate (31); 
1422691200000 


> d.toLocaleDateString(); 


"1/31/2015" 


0, 


0, 


0, 


1); 


LIF 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 日 期 信息 


Lys 


续 表 


属性 /方法 相关 说 明 及 示例 
getHours () 
getUTCHours () 


setHours (hour, min, sec, 


ms) 


setUTCHours (hour, min, 


sec, ms) 
这 组 方法 分 别 用 于 获取 或 设置 Date 对 象 中 的 小 时 、 分 钟 、 秒 数 及 点 
getMinutes () 
秒 数 信息 。 它 们 都 是 从 0 开始 计数 的 
getUTCMinutes () 
> var d = new Date(2015, 0, 1); 
setMinutes (min, sec, ms) > d.getHours() + ':' + d.getMinutes(); 


x 7 "0:0" 
setUTCMinutes (min, sec, . 


ma) > d.setMinutes (59); 

getSeconds () 1420102740000 

getUTCSeconds () s.r + 1:1 不 进而 BENitatesry 
setSeconds (sec, ms) "0359" 


setUTCSeconds (sec, ms) 

getMilliseconds () 

getUTCMilliseconds () 

setMilliseconds (ms) 

setUTCMilliseconds (ms) 
该 方法 用 于 返回 本 地 时 间 与 UTC 时 间 之 间 的 差距 ， 以 分 钟 为 单位 。 例 
如 下 面 实现 的 是 PST〈 即 Pacific Standard Time) 与 UTC 之 间 的 差距 : 


> new Date () .getTimezoneOffset (); 


getTimezoneOffset () 
480 
> 420 / 60; // hours 
8 
这 组 方法 返回 的 是 当前 时 间 的 星期 数 ， 从 0 〈 星 期 日 ) 开始 : 
getDay () 


> var d = new Date(2015, 0, 1); 
getUTCDay () > d.toDateString(); 
"Thu Jan 01 2015" 


续 表 





属性 /方法 相关 说 明 及 示例 
> d.getDay(); 
4 

getDay () > var d = new Date(2015, 0, 4); 
> d.toDateString(); 

getUTCDay () 





"Sat Jan 04 2015" 


> d.getDay(); 
0 





ECMAScript5 对 Date 的 补充 


表 C-15 


属性 /方法 相关 说 明 





获得 当前 时 间 惟 的 快捷 方法 : 


Date .now 
0 > Date.now() === new Date().getTime(); 





true 


toString () 方 法 的 一 种 变种 : 
> var d = new Date(2015, 0, 1); 
> d.tostrang ()y 


Toa en ware "Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


toIsoString() > d.toUTCString(); 
"Thu, 01 Jan 2015 08:00:00 GMT" 


> ds telsostring() + 
"2015-01-01T00:00:00.0002" 


返回 值 与 toISOString () 一 样 。 该 函数 被 JSON .stringify() 


Date.prototype. 调用 ( 见 本 篇 附录 末 ) 
toJSON () > var d = new Date(); 
> d.toJSON() === d.tolSOString(); 
true 
Math 


Math 对象 的 情况 与 其 他 内 建 对 象 稍 许 有 些 不 同 ， 因 为 它 不 能 被 用 
做 构造 器 来 创建 对 象 。 实 际 上 ， 它 只 不 过 是 一 组 相关 函数 和 常量 的 集合 
而 已 。 下 面 我 们 通过 一 些 具体 的 实例 来 看 看 究竟 有 哪些 不 同 : 

> typeof Date.prototype; 





"object" 

> typeof Math.prototype; 
"undefined" 

> typeof String; 
"function" 

> typeof Math; 

"object" 


Math 对 象 的 成 员 


表 C-16 


Math. 
Math. 
Math. 


Math. 





Math. 


Math. 


Math. 


Math. 


属性 /方法 


LOG2E 
LOG10E 
PI 
SQRT1 2 
SQRT2 





这 里 列 出 的 都 是 一 些 常 用 的 数 


Math.E; 


. 718281828459045 


Math.LN10; 


. 302585092994046 


Math.LN2; 


- 6931471805599453 


Math. LOG2E; 


-4426950408889634 


Math. LOG10E; 


. 4342944819032518 


Math. PI; 


.141592653589793 


Math.SQRT1 2; 


. 7071067811865476 





Math.SQRT2; 


-4142135623730951 


相关 说 明 


DY Ae EL. a 
学 PE, 都 是 





续 表 


属性 /方法 
Math.acos (x) 
Math.asin (x) 
Math.atan (x) 
Math.atan2(y, x) 
Math.cos (x) 
Math.sin (x) 


Math.tan (x) 


Math. round (x) 
Math. floor (x) 


Math.ceil (x) 


Math.max (num1, 
num2, num3, ...) 
Math.min(numl, 


num2, num3, ss.) 


Math.abs (x) 


Math.exp (x) 


Math.log (x) 


相关 说 明 


这 是 对 象 中 的 三 角 函 数 集合 


round () 方法 用 于 返回 最 接近 本 值 的 整数 ， 而 ceil () 用 于 向 上 取 整 ， 


floor () 则 用 于 向 下 取 整 


> Math.round(5.5); 
6 


> Math.floor(5.5); 
5 


> Math.ceil(5.1); 
6 


max () 和 min() 这 两 个 方法 分 别 用 于 返回 其 参数 中 的 最 大 值 和 最 小 值 。 
但 如 果 参 数列 表 中 有 一 个 值 为 NaN， 那 么 两 个 方法 都 返回 Nan 


> Math.max(4.5 101, Math.PI) 
101 


> Math.min(4.5, 101, Math.PI); 
3.141592653589793 
该 方法 用 于 返回 参数 的 绝对 值 
> Math.abs(-101); 
101 


> Math.abs (101); 
101 


指数 函数 : 返回 e (Math.E) MY x KA 


> Math.exp(1) === Math.E; 
true 


取 x 的 自然 对 数 


> Math.log(10) === Math.LN10; 
true 


续 表 


属性 /方法 相关 说 明 
取 x 的 平方 根 
> Math.sqrt (9); 


Math.sqrt (x) 3 


> Math.sqrt (2) === Math.SQRT2 


true 





Mx MW y KA 
Nat npow (ey y) > Math.pow(3, 2); 

9 

该 方法 用 于 返回 0 到 1 之 间 的 随机 数 〈 包 括 0) 
> Math.random(); 
0.8279076443185321 

如 果 我 们 想得到 10 至 100 之 间 的 随机 整数 ， 可 使 用 如 下 方式 : 
> Math.round(Math.random() * 90 + 10); 
79 


Math.random () 


RegExp 

RegExp() 是 一 个 用 于 创建 正则 表达 式 对 象 的 构造 器 ， 其 第 一 个 参数 
是 正则 表达 式 的 匹配 模式 ， 第 二 个 参数 则 是 该 匹配 模式 的 修饰 符 。 

> var re = new RegExp(‘[dn]Jo+dle’, 'gmi'); 

该 对 象 的 模式 可 以 匹配 “noodle”、“doodle”、“doooodle” 等 。 当 然 ， 
我 们 也 可 以 用 正则 表达 式 标 识 法 来 创建 同样 的 对 象 : 

> var re = (‘/[dn]o+dle/gmi'); // recommended 

关于 正则 表达 式 的 更 详细 信息 ， 读 者 可 以 参考 第 4 章 : 对 象 和 附录 
D: 正则 表达 式 中 的 相关 内 容 。 

RegExp 对 和 象 的 成 员 





表 C-17 


属性 /方法 相关 说 明 


global 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 g 修饰 符 时 为 true 
ignoreCase 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 i 修饰 符 时 为 true 
multiline 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 m 修饰 符 时 为 true 


返回 字符 串 中 下 一 个 匹配 串 的 开始 位 置 。 当 然 ， 该 方法 也 只 有 在 test () 和 
exec () 成 功 匹 配 之 后 ， 且 当 g〈global) 修饰 符 被 设 定 时 才 有 效 


> var re = /[dn]ot+dle/g; 
> re.lastIndex; 
0 


> re.exec("noodle doodle"); 
["noodle"] 


> re.lastIndex; 
lastIndex 6 


> re.exec("noodle doodle"); 
["doodle"] 


> re. lastIndex; 
13 


> re.exec("noodle doodle"); 
null 


> re.lastIndex; 


0 
只 读 属 性 ， 返 回 的 是 该 正则 表达 式 的 模式 〈 不 包含 修饰 符 ) 
Source > var re = /[nd]ot+tdle/gmi; 


> re.source; 
"[nd]o+dle" 


该 方法 会 对 其 输入 字符 串 进行 正则 匹配 ， 一 旦 匹配 成 功 ， 就 以 数组 的 形式 
返回 所 有 的 匹配 串 或 匹配 分 组 。 并 且 ， 当 对 象 被 设置 有 g 修饰 符 时 ， 该 方 
法 会 自动 确定 第 一 个 匹配 串 ， 并 对 lastIndex 属性 进行 相关 的 设置 。 但 
如 果 匹 配 不 成 功 ， 该 方法 就 返回 null 


exec (string) 


续 表 


属性 /方法 相关 说 明 


> var re = /([dn]) (o+)dle/g; 
> re.exec("noodle doodle"); 
["noodle", Mt "oo"] 





exec (string) > re.exec ("noodle doodle"); 


["doodle" ; "d" i "oo"] 
exec () 所 返回 的 数组 有 两 个 附加 属性 : index (VLBCAbAY FER) 以 
及 input〔 所 搜索 的 源 字符 串 ) 





该 方法 的 功能 与 exec () 相同 ， 只 不 过 它 只 返回 true 或 false 


> /noo/.test('Noodle'); 
test (string) false 

> /noo/i.test('Noodle'); 
true 





Error 对 象 
通常 情况 下 ，Error 对象 是 由 程序 的 运行 环境 〈 如 浏览 右 ) 或 其 代 
人 码 本 里 来 负责 创建 的 。 


> var e = new Error(‘jaavcsritp is _not_ how you spell it’); 





> typeof e; 
"object" 


除了 Error() 构 造 嚣 本 里 ，Error 对 象 还 要 男 外 留 出 派生 对 象 ， 它 们 分 


EvalError 
RangeError 
ReferenceError 
SyntaxError 
TypeError 
URIError 
Error.prototype 的 成 员 
表 C-18 


属 性 名 相关 说 明 
该 属性 返回 的 是 创建 当前 错误 对 象 的 构造 器 的 名 称 























name > var e = new EvalError('Oops'); 
> e.name; 
"EvalError" 
该 属性 返回 的 是 当前 错误 对 象 中 的 具体 信息 : 
message > var e = new Error('Oops... again'); 


> e.message 
"Oops... again" 





JSON 对 象 

JSON 对 象 是 ES5 的 新 对 象 。 它 并 非 构造 器 〈 这 点 与 Math 对 象 很 
像 ) ， 并 且 它 仅 有 两 个 方法 : parse0 及 stringify0。 对 于 不 原生 支持 
JSON 对 象 的 ES3 浏 览 器 而 言 ， 我 们 可 以 使 用 外 部 代码 来 使 其 达到 同样 效 
果 ， 详 见 http://json.org。 

JSON 是 JavaScript Object Notation (JavaScript 对 象 标记 法 ) 的 简 
称 。 它 是 一 个 轻 量 级 的 数据 交换 格式 。JSON 数 据 是 JavaScript 的 子 集 ， 
仅 支 持 基本 数据 类 型 ， 对 象 以 及 数组 字面 量 。 

JSON 对 象 的 成 员 

表 C-19 


相关 说 明 





获得 JSON 格式 的 字符 串 ， 返 回 对 象 : 


> Var data = "{"Hellove 1, “has [La 2 81} 
> var o = JSON.parse (data); 
> o.hello; 


parse (text, 





callback) 1 
>: Oshis 
[1, 2, 3] 


续 表 


方法 相关 说 明 


可 选项 callback 提供 查看 与 修改 返回 值 的 能 力 。 它 会 获得 key 和 value 对 作为 参 
数 ， 并 且 可 以 修改 value， 或 删除 value (返回 undefined 即 可 ): 


> function callback(key, value) { 
console.log(key, value); 
if (key === 'hello') { 
return 'bonjour'; 


} 


if (key === 'hi') { 
return undefined; 
} 
parse (text, return value; 
} 
callback) > var o = JSON.parse(data, callback) ; 
hello 1 
0 1 
L 2 
2 3 


hi [ly yr 3] 
Object {hello: "bonjour"} 


> o.hello; 
"bonjour" 


> "ad! da coe 
false 
将 任何 形式 的 值 ( 通 常 为 对 象 或 数组 ) 编码 为 JSON 字符 串 
> Var oO= { 
hello: 1, 
hae 2y 
when: new Date(2015, 0, 1) 


> JSON.stringify(o); 

"{"hello":1,"hi":2,"when":"2015-01-01T08:00:00.000Z"}" 
你 可 以 通过 第 二 个 参数 设置 一 个 callback 函数 〈 或 者 数组 形式 的 白 名 单 ) 来 修改 
返回 值 。 白 名 单数 组 的 键 值 部 分 就 是 你 希望 出 现在 该 集合 中 的 属性 : 


callback, JSON.stringify(o, ['hello', 'hi']); 
" { "hello" è an š "hi" :2} " 


Stringify 


(value, 


white) 
而 最 后 一 个 参数 则 可 以 让 我 们 获得 一 个 人 类 可 读 的 版 本 , 您 可 以 通过 它 指定 相关 
空白 字符 串 或 空白 符 数量 : 
> JSON.stringify(o, null, 4); 
"{ 
"hello": 1, 
miT: 2y 


"when": "2015-01-01T08:00:00.0002" 
p” 





当 我 们 使 用 《第 4 章 对 象 中 所 讨论 的 ) 正则 表达 式 时 ， 可 以 对 文本 
字符 串 进 行 如 下 匹配 : 

> "some text".match(/me/); 

["me"] 

但 问题 真正 的 关键 是 正则 表达 式 的 匹配 模式 ， 而 不 是 这 些 字符 串 文 
本 。 在 表 D-1 中 ， 我 们 详细 列 出 了 各 种 不 同 模式 的 语法 ， 并 提供 了 相关 
的 示例 ， 以 供 读者 参考 。 

#2D-1 


匹配 模式 相关 说 明 





这 里 匹配 的 是 字符 类 信息 

> "some text".match(/[otx]/g); 

["o"., TES j oe "em 
这 里 匹配 的 是 某 一 区 间 内 的 字符 类 信息 。 例 如 ，[a-a] 就 相当 于 [abca] ，[a-z] 
就 表示 我 们 要 [匹配 的 是 所 有 的 小 写字 母 ， 而 [a-zA-20-9_] 则 表示 匹配 所 有 字 
母 、 数 字 及 下 划 线 
[a-z] > "Some Text".match(/[a-z]/g); 
| vm ， wer", NeW, Wi RE 


[abc] 





> "Some Text".match (/[a-zA-Z]/g) ; 
["s", Wot "m" y "Tay rege ; "e"; TS y nm 七 "] 








续 表 


匹配 模式 


[*abc] 


alb 


a (?=b) 


a(?!b) 


相关 说 明 
这 里 匹配 的 是 所 有 不 属于 表达 式 限 定 范围 内 的 字符 


> "Some Text".match (/[*a-z]/g); 

free S Tp ME] 
这 里 匹配 的 是 a 或 者 b。 中 间 那 个 紧 杠 是 “或 者 ”的 意思 ， 该 符号 可 以 在 同 
达 式 中 多 次 使 用 

> "Some Text".match(/t|T/g) ; 

Lr, "e" 


> "Some Text".match (/t|T|Some/g) ; 
["Some", "pT Mer] 
这 里 匹配 的 是 所 有 后 面 跟着 b 的 a 的 信息 


> "Some Text".match (/Some (?=Tex) /g) ; 
null 


> "Some Text".match(/Some(?= Tex) /g); 
["Some"] 


这 里 匹配 的 是 所 有 后 面 不 跟着 b 的 a 的 信息 


> "Some Text".match(/Some(?! Tex) /g); 
null 


> "Some Text".match (/Some (?!Tex) /g) ; 
["Some"] 


反 斜 杠 主 要 用 于 帮助 我 们 匹配 一 些 模式 文本 中 的 特殊 字符 


> "R2-D2".match (/ [2-3]/g); 
[2 2] 


> "R2=D2" .match (/ [2\-3]./¢) 7 
"2", "=", "2"] 

换行 符 

回 车 符 

换 页 符 

横向 制 表 符 

纵向 制 表 符 

这 里 匹配 的 是 空白 符 ， 包 括 上 面 五 个 转 义 字符 


> "R2\n D2".match(/\s/g) ; 
["\n" P " mi 


-R 


续 表 


匹配 模式 相关 说 明 


这 里 正好 与 上 面相 反 ， 匹 配 的 是 除 空白 符 以 外 的 所 有 内 容 ， 就 相当 于 [^\s] 
\S > "R2\n D2".match(/\S/g); 
[SRE F "2" 3 ny i wa] 
这 里 匹配 的 是 所 有 的 字母 、 数 字 或 下 划 线 ， 相 当 于 [A-za-z0-9_] 


\w > "Some text! ".match(/\w/g) ; 
Ss Rom, as bells "e", ai ar fen". Mise, | 
这 里 匹配 的 正好 与 \w 相反 
\W > "Some text!".match (/\W/g) 
i. " j " 1 < 
这 里 匹配 的 是 所 有 的 数字 类 信息 ， 相 当 于 [0-9] 
\d > "R2-D2 and C-3P0".match (/\d/g) ; 
> a AA | 
这 里 正好 与 \d 相反 ， 匹 配 的 是 非 数 字 类 信息 ， 相 当 于 [^0-9] 或 [^N\dj] 
\D > "R2-D2 and C-3PO".match(/\D/g) ; 
["R" F j SER ; "ps 7 "n " ž Wg me 7 "aT j "q" š "n " 人 
“Cc ý Cr 7. "pr F "O"] 
这 里 匹配 的 是 一 个 单词 的 边界 ， 例 如 空格 或 标点 符号 
下 面 匹配 的 是 后 面 跟着 2 的 R 或 D: 
> "R2D2 and C-3PO".match (/[RD]2/9); 
["R2" j "52" 
\b 如 果 在 上 面 的 模式 中 加 入 该 匹配 符 ， 匹 配 的 就 只 有 单词 末尾 的 那 一 个 了 : 
> "R2D2 and C-3PO".match(/[RD]2\b/g) ; 
["D2"] 
同样 的 ， 如 果 我 们 在 其 中 输入 一 个 破 折 号 ， 也 可 以 被 当做 一 个 单词 的 末尾 
> "R2-D2 and C-3PO".match(/[RD]2\b/g) ; 
["R2" f "D2"] 
这 里 的 匹配 操作 与 \b 正好 相反 
> "R2-D2 and C-3PO".match(/[RD]2\B/g); 
\B null 
> "R2D2 and C-3PO".match(/[RD]2\B/g) ; 
["R2"] 
[\b] 这 里 匹配 的 是 退 格 键 符 (Backspace) 
\0 这 里 匹配 的 是 null 值 


匹配 模式 相关 说 明 
这 里 匹配 的 是 一 个 Unicode 字符 ， 并 且 是 以 一 个 四 位 的 十 六 进 制 数 来 表示 的 


ere >"croan" .match (/\u0441\u0442\u043E/) 
["cro"] 
这 里 匹配 的 是 一 个 字符 ， 该 字符 的 编码 是 以 一 个 两 位 的 十 六 进 制 数 来 表示 的 
\ > “\n64/ "5 
x00 "a" 
> "dude" .match (/\x64/9); 
["a" kg "a"] 


这 里 匹配 的 是 字符 串 开头 部 分 。 男 外 ， 如 果 我 们 对 该 模式 设置 了 m 修饰 符 (多 
行 )， 那 么 它 匹 配 的 是 每 一 行 的 开头 
>"regular\nregular\nexpression".match(/r/g) ; 
cs", TET 5 i Ue oa ngr] 
>"regular\nregular\nexpression".match(/^r/g); 
[trr] 
>"regular\nregular\nexpression".match (/^r/mg); 
| i nyer] 
这 里 匹配 的 是 输入 消息 的 末尾 部 分 。 另 外 ， 如 果 我 们 对 该 模式 设置 了 多 行 修饰 
符 ， 那 么 它 匹配 的 是 每 一 行 的 末尾 
$ >"regular\nregular\nexpression".match (/r$/g) ; 
null 
>"regular\nregular\nexpression".match (/r$/mg) ; 
A hae ten] 
这 里 匹配 的 是 除了 新 行 符 或 换行 符 以 外 的 任何 字符 
> "regular".match (/r./9g); 
["re"] 
> "regular".match(/r.../g); 
["reg w] 


这 里 匹配 的 是 模式 中 间 出 现 0 次 或 多 次 的 内 容 。 例如 , /*/ 可 以 匹配 任何 内 容 (包括 空 串 ) 
> en MACH i/s Eri 


ER 
> "anything" .match (/.*/) 
["anything"] 


> “anything".match (/n.*h/); 
[ " nyth" ] 


需要 注意 的 是 ， 该 模式 匹配 采用 的 是 “贪心 策略 "” 这 意味 着 它 会 尽 可 能 多 地 区 
配 一 些 可 能 性 


续 表 


匹配 模式 


{n} 


{min,max} 


(pattern) 


相关 说 明 


这 里 匹配 的 是 模式 中 间 出 现 0 次 或 1 次 的 内 容 
> "anything" .match(/ny?V/g) ; 
[Nay", "a"] 
这 里 匹配 的 是 模式 中 间 出 现 至 少 1 次 (或 多 次 ) 的 内 容 
> "anything" .match (/ny+/g) ; 
["ny"] 


> "R2-D2 and C-3PO".match (/ [a-z]/gi) ; 
["R" - "DT i at ‘ "y" á "q" A Re npr A zo] 


> "R2-D2 and C-3P0O".match (/[a-z]+/gi); 
(oR; Dt: Mandt; “OY, 870") 

这 里 匹配 的 是 模式 中 间 出 现 过 mn 次 的 内 容 ， 
> "regular expression" .match(/s/g) ; 
ja, tan] 


> "regular expression".match(/s{2}/g); 
["ss"] 


> "regular expression".match (/\b\w{3}/g) ; 
["reg" a "e pb") 


这 里 匹配 的 是 在 模式 中 出 现 次 数 在 min 到 max 之 间 的 信息 。 如 果 我 们 省 略 了 max, 


就 意味 着 没有 最 多 次 数 ， 只 有 最 少 次 数 。 但 min 是 不 能 省 略 的 。 
例如 ， 如 果 我 们 在 输入 “doodle” 这 个 词 时 输入 了 104 “o”: 
> "qdqoooooooooodle" .match (/o/g) ; 
[Ye “ot, or, tom, Tor, On So”, Not, Mot, Nom 
> "dooooooooccodle".match (/o/glength) ; 
["00",; "60", "S00, "Oo", “66°] 
10 
>"doooooooooodqle" .match (/o{2,}/g); 
["oo""oo""oo""00""00" ] 
>"dqoooooooooodle" .match (/o0{2,6}/g); 
["o00000", "0o000"] 


当 某 个 匹配 模式 被 放 在 括号 内 时 ， 就 表明 匹配 该 模式 的 匹配 串 是 可 替换 的 ， 因 此 


它 也 被 称 为 捕获 模式 
这 些 被 捕获 的 匹配 串 可 以 分 别 用 $1、$2…$9 等 参数 来 表示 
例如 ， 我 们 可 以 将 匹配 串 中 所 有 的 “r” 都 重复 一 次 : 


续 表 


匹配 模式 相关 说 明 


> "regular expression".replace(/(r)/g, '$1$1"'); 
"rregularr exprression" 


或 我 们 将 所 有 匹配 “re” 的 内 容 都 蔡 换 成 “er”: 


> "regular expression".replace (/(r) (e)/g, '$2$1'); 


(pattern) 


"ergular experssion" 





这 不 是 捕获 模式 ， 也 就 是 说 这 里 不 能 用 $1、$2 等 参数 来 记录 匹配 串 
例如 在 下 面 的 示例 中 ， 当 我 们 对 “re” 进 行 匹 配 时 ，$1 记 住 的 不 是 “r”， 而 是 
第 二 个 模式 所 匹配 的 结果 e: 


> "regular expression".replace (/(?:r) (e)/g, '$1$1"'); 


(?:pattern) 





"eegular expeession" 
有 时 候 ， 模 式 中 的 茶 些 特殊 字符 所 代表 的 意义 往往 不 止 一 种 ， 例 如 
、?、\b 等 ， 因 此 在 我 们 使 用 时 有 必要 对 此 稍 加 留意 。 








